Javascript 在html正文之前预加载画布？_Javascript_Html_Flask_Canvas

Javascript 在html正文之前预加载画布？

javascript html flask canvas

Javascript 在html正文之前预加载画布？,javascript,html,flask,canvas,Javascript,Html,Flask,Canvas,我有一个基本的webapp，它使用画布框架呈现每个网页上的内容。加载页面时，chrome将在呈现主要内容之前呈现一个空白画布框架（大约20毫秒的空白框架）当点击多个页面时，空白帧会在视觉上分散注意力，导致用户体验不佳。在chrome布局页面之前，有没有办法预渲染画布框架？或者有没有一种方法可以让画布框架就绪，这样chrome就不会显示空白框架基本代码大纲如下所示： <script> function draw() { var canvas = document.ge

我有一个基本的webapp，它使用画布框架呈现每个网页上的内容。加载页面时，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>


函数绘图（）{
var canvas=document.getElementById（“samplecanvas”）；
if（canvas.getContext）{
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0，0，img.width，img.height，
0，0，canvas.width，canvas.height）；
}
img.src=“数据：图像/jpeg；base64，…”；
}否则{
警报（'此浏览器不支持画布'）
}
}

正如我所说，上面的方法确实有效，它只会产生一个令人讨厌的空白帧。base64嵌入的图像很大（720p），但我仍然不认为渲染速度慢

有什么想法吗？

但是在画布完成渲染之前，网页应该显示什么？一个回退图像就好了。但这似乎并不是所有浏览器都完全支持的，例如：但更重要的是，页面的其余部分都是加载的，从chrome性能工具来看，它完全是单线程的。如果canvas元素可以在解析时显示（可能在单独的线程/工作线程中预先呈现）页面的其余部分，那就太好了。