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

Question

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

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

每个事件都会创建一个我可以在 Firebug 中查看和监控的 GET。

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

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

伪代码看起来像这样......

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 catch 。

干得好，巴特让我进入 image.complete属性。

Answer 1

您可以查看图像的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.preload plugin利用 image.complete 属性。