javascript - 大图像在 Chrome 中缓慢绘制，从上到下逐渐绘制

Question

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

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

更糟糕的是，Chrome 绘制图像所需的时间不一致。有时图像会立即准备就绪，有时则需要近 10 秒。我真的不能每次都多等 10 秒来确保图像准备好显示。

是否有任何事件我可以监听以了解图像何时完全绘制？或者是否有任何属性我可以观察以了解显示的图像数量？

Answer 1

正如 @Mike C 正确指出的那样，一旦完全加载，您就可以将图像添加到 DOM 上，like he's done in his example.

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);
};