45

在 Web 应用程序上，我需要处理大量高分辨率图像，这些图像会动态添加到 DOM 树中。它们是预先加载的，然后添加到页面中。

检测此类图像何时完成加载是一回事，为此我使用该load事件，但是如何使用 Javascript 检测它何时在浏览器中完成呈现？在处理高分辨率图像时，实际的绘画过程可能会花费大量时间，知道何时结束非常重要。

4

5 回答 5

29

我使用 requestAnimationFrame 来做到这一点。加载图像后，它将在下一个动画帧期间渲染。因此，如果您等待两个动画帧，您的图像将被渲染。

function rendered() {
    //Render complete
    alert("image rendered");
}

function startRender() {
    //Rendering start
    requestAnimationFrame(rendered);
}

function loaded()  {
    requestAnimationFrame(startRender);
}

见http://jsfiddle.net/4fg3K/1/

于 2014-07-10T10:42:02.017 回答
4

我有同样的问题。我已经创建了带有进度条的预加载器页面。加载图片时，白色背景的预加载页面平滑消失到opacity: 0，但图片仍未渲染。

setInterval当图像加载（但未渲染）时，我终于使用了。在间隔中，我检查了naturalWidthandnaturalHeight属性(Support: IE9+)。最初它等于0并且当图像被渲染时它显示它的当前宽度和高度。

const image = document.getElementById('image');

image.src = "https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-1.jpg";

image.onload = function () {
  console.log('Loaded: ', Date.now());
  const interval = setInterval(() => {
    if (image.naturalWidth > 0 && image.naturalHeight > 0) {
      clearInterval(interval);
      rendered();
    }
  }, 20);
}

function rendered() {
  console.log('Rendered: ', Date.now());
}
img{
  width: 400px;
}
<img id="image"/>

于 2019-08-20T08:22:45.580 回答
0

来自mdn，

MozAfterPaint 事件在屏幕上重新绘制内容时触发，并提供有关已重新绘制的内容的信息。主要用于考察性能优化

希望您这样做是为了衡量渲染图像的性能。

于 2014-07-02T13:27:50.280 回答
-1

更新：不要使用这种方法 - 在图像尺寸设置为默认值以外的情况下不起作用

您可以将元素的高度设置为自动（具有固定宽度）并超时继续检查元素的尺寸是否与图像的自然尺寸匹配。这不是最好的解决方案，但如果您真的需要在渲染后而不是在加载后做某事，这是一个不错的选择。

或多或少是它的样子：

//this is NOT a real code
function checkIfRendered(img, onRender) {
    var elRatio = img.width() / img.height();
    var natRatio = img.naturalWidth / img.naturalHeight;

    if (elRatio === natRatio)
        onRender();
    else {
        setTimeout(function() {
            checkIfRendered(imgEl, onRender)
        }, 20);
    }
}

img.onload(checkIfRendered(img, function() { alert('rendered!'); }));
于 2014-04-04T11:19:04.943 回答
-6

You need the onload event on the <img> tag. For example:

function loadImage () {
  alert("Image is loaded");
}
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">

source

If the image is the background of another element, load the image in the background (with a simple Ajax GET request) and when the result comes back, set the background after it has been loaded.

于 2013-01-29T08:24:45.667 回答