如何监控图像源的完全加载状态

How to monitor an image source for fully loaded status

本文关键字：加载 状态 图像 何监控 监控      更新时间：2023-09-26

我正在将大量图像加载到动态div中，并且我正在使用预加载器来获取图像。

imageObj = new Image();
imageObj.src = imgpath + imgname;

这些事件中的每一个都创建了一个GET，我可以在Firebug中看到并监视它。

如果我知道图像的名称和路径，我可以查看相关的XMLHttpRequest以查看GET是否已经完成吗?

我不想在这个过程中依赖(或使用).onload事件。

pseudo应该是这样的…

if (imageObj.GET = 'complete')

有人有过这样的经历吗?

编辑1

感谢Bart的帮助(见下文)，我已经改变了我的图像预加载器来存储图像对象的数组…

function imagePreLoader(imgname) {
    images[imgnum] = new Image();
    images[imgnum].src = imgpath + imgname;// load the image
    imgnum ++;
}

然后，在运行了所有其他函数来构建内容div之后，我在下面使用了image.complete属性…

var interval = setInterval(function () {
    imgcount = imgnum - 1; // because the imgnum counter ++ after src is called.
    ok = 1;
    for (i=0; i<imgcount; i++) {
        if (images[i].complete == false){
            ok = 0;
        }
    }
    if (ok == 1) {
        clearInterval(interval);
        showIndexOnLoad();
    }
}, 1000);

这等待直到所有的图像都完成，只有当我从间隔函数得到'ok'时才触发showIndexOnLoad()函数。

所有图像现在都按我想要的方式显示，所有图像都同时显示，而不需要额外等待get赶上。

做得好，Bart，让我使用image.complete属性。

您可以观察图像的complete属性，以查看图像是否已完全加载。

下面是一个例子。

http://jsfiddle.net/t3esV/1/

function load (source) {
    var img = new Image();
    img.src = source;
    console.log('Loading ' + source);
    var interval = setInterval(function () {
        if (img.complete) {
            clearInterval(interval);
            complete(img);
        }
    }, 400);
};
function complete(img) {
    console.log('Loaded', img.src);
    document.body.appendChild(img);
};

备注:当出现异常且complete未设置为true时，此示例无法清除间隔

更新我写了一个简单的jQuery。预加载插件以利用image.complete属性。

这是一个非常有趣的问题，恐怕没有实际的解决方案。图像的load事件是当图像正在渲染并且浏览器知道它的宽度和高度时。

您需要的是一个标签适用的readystatechange事件。遗憾的是，只有IE允许您将这些元素绑定到非文档元素，所以这不是一个选项。

还有很多插件可以让你绕过它。其中一个非常热门的是https://github.com/desandro/imagesloaded，它具有非常有效地处理所有浏览器差异的额外优势。然而，它仍然依赖于load事件(我很确定这是开始做你想做的事情的唯一方法)。

相关文章：