在Chrome中缓慢地绘制大型图像，从上到下逐步绘制

Large images paint-in slowly in Chrome, progressively from top to bottom

本文关键字：绘制 从上到下 图像 大型 缓慢 Chrome      更新时间：2023-09-26

我正在将一些相当大的图像(例如，5000×4000, 44MB PNG)加载到本地运行的Chrome web应用程序中，并且我看到图像从上到下缓慢地"绘制"(就像图像可能在互联网上缓慢的连接上加载缓慢)。

我想等到这些图像完全渲染后再淡入。但是，等待加载图像的所有典型方法都失败了。我的load事件处理程序触发，图像的完整文件大小被加载，图像报告正确的高度，但通常，图像只是部分渲染，仍然从顶部绘制。

更糟糕的是，Chrome在绘制图像时花费的时间不一致。有时图像会立即准备好，有时则需要大约10秒钟。而且我真的不能每次都多等10秒钟来确保图像已经准备好显示了。

是否有任何事件，我可以听知道什么时候的图像完全绘制?或者有任何属性，我可以观察到多少图像显示?

正如@Mike C正确指出的那样，您可以在完全加载后将图像添加到DOM上，就像他在他的示例中所做的那样。

var img = new Image();
img.src = 'http://placehold.it/5000x5000';
img.onload = function() {
    var loadingEl = document.querySelector('p');
  loadingEl.parentNode.removeChild(loadingEl);
  document.body.appendChild(img);
};
相关文章：