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赶上来。

干得好，巴特让我加入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属性。

Answer 2

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

您将会遇到标记适用的readystatechange事件。唉，只有IE允许你将它们绑定到非文档元素，所以这不是一个选项。

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

如何监视图像源的满载状态

2 个答案:

更新