如何监控图像源的完全加载状态 [英] How to monitor an image source for fully loaded status

问题描述

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

I am loading a large number of images into a dynamic DIV and I am using a preloader to get the images.

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

这些事件中的每一个都会创建一个 GET，我可以在 Firebug 中查看和监控它.

Each of these events creates a GET that I can see and monitor in Firebug.

如果我知道图片的名称和路径，是否可以通过查看相关的 XMLHttpRequest 来查看 GET 是否完成?

If I know the name and path of an image, can I watch the relevant XMLHttpRequest to see if the GET has completed?

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

I do not want to rely on (or use) .onload events for this process.

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

The pseudo would look something like this...

if (imageObj.GET = 'complete')

有没有人有过这样的经历?

Has anyone had any experience of this?

编辑 1

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

Thanks to the help from Bart (see below) I have changed my image preloader to store an array of the image objects...

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

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

And then, after all my other functions have run to build the content DIVs, I used the image.complete attribute in the following...

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() 函数.

This waits until all the images are complete and only triggers the showIndexOnLoad() function when I get the 'ok' from the interval function.

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

All images now appear as I wanted, all at once with no additional waits for the GETs to catch up.

干得好 Bart 让我使用 image.complete 属性.>

Well done Bart for putting me on to the image.complete attribute.

推荐答案

您可以通过查看图片的complete属性来查看图片是否完全加载.

You can watch the complete property of the image to see if the image is fully loaded or not.

这是一个例子.

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 时，此示例无法清除间隔.

Note: This example fails to clear the interval when something goes wrong and complete is never set to true.

我编写了一个简单的 jQuery.preload 插件 来利用 图像.完整的 属性.

I wrote a simple jQuery.preload plugin to take advantage of the image.complete property.

这篇关于如何监控图像源的完全加载状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！