Блог

Главная - Вопросы по программированию - Предварительная загрузка холста перед телом html?

Предварительная загрузка холста перед телом html?

#javascript #html #flask #canvas

#javascript #HTML #flask #холст

Вопрос:

У меня есть базовое веб-приложение, которое использует рамки холста для отображения содержимого на каждой веб-странице. При загрузке страницы Chrome отобразит одну пустую рамку холста перед отображением основного содержимого (~ 20 мс или около того пустой рамки).

При переходе по нескольким страницам пустая рамка визуально отвлекает и приводит к ухудшению работы пользователя.

Есть ли способ предварительно отобразить рамку холста перед тем, как Chrome разместит страницу? Или есть способ подготовить рамку холста, чтобы Chrome не отображал пустую рамку?

Основная схема кода выглядит следующим образом:

 <script>
  function draw() {
    var canvas = document.getElementById("samplecanvas");
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");

      var img = new Image();
      img.onload = function(){
        ctx.drawImage(img, 0, 0, img.width, img.height,
                      0, 0, canvas.width, canvas.height);
      }
      img.src = "data:image/jpeg;base64,...........";
    } else {
      alert('canvas not supported by this browser')
    }
  }
</script>
<body  onload="draw();">
  <canvas id="samplecanvas" width="800" height="800"></canvas>
</body>

Как я уже сказал, вышеупомянутое работает, это просто приводит к пустой рамке, которая действительно раздражает. Встроенное изображение base64 большое (720p), но я все равно не ожидал бы, что это будет медленно отображаться.

Есть идеи?

Комментарии:

1. но что должна отображать веб-страница перед завершением рендеринга canvas?

2. Резервное изображение было бы неплохо. Но, похоже, это не полностью поддерживается всеми браузерами, например: <идентификатор холста =»samplecanvas» width =»800″ height =»800″>.. ></canvas> Но что более важно, остальная часть страницы загружается, и, глядя на Chrome performance tools, все это полностью однопоточно. Было бы неплохо, если бы элемент canvas был готов к отображению (возможно, предварительно отрисованный в отдельном потоке / worker) с остальной частью страницы по мере ее разбора.