2

我正在将大量图像加载到动态 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);

这会等到所有图像都完成，并且只有showIndexOnLoad()当我从间隔函数中获得“确定”时才会触发该函数。

现在，所有图像都按我的意愿显示，一次全部显示，无需额外等待 GET 赶上。

干得好 Bart 让我了解image.complete属性。

4

2 回答 2

2

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

于 2013-05-20T12:37:49.123 回答
0

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

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

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

于 2013-05-20T13:11:34.430 回答