如何监视图像源是否处于满载状态 [英] How to monitor an image source for fully loaded status

问题描述

  
 
 imageObj = new Image（）; 
 imageObj.src = imgpath + imgname; 
  

这些事件中的每一个都会创建一个GET，我可以在Firebug中看到并进行监视。 b
$ b

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

我不想依赖（或使用）.onload这个进程的事件。

伪将看起来像这样...

  if（imageObj.GET ='complete'）
  

有没有人有过这方面的经验？

编辑1

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

pre $函数imagePreLoader（imgname）{
images [imgnum] = new Image（）;
images [imgnum] .src = imgpath + imgname; //载入图片
imgnum ++;
}

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

  var interval = setInterval（function（）{
 imgcount = imgnum  -  1; //因为调用src后的imgnum counter ++。
 ok = 1; 
 
 for（i = 0; i< imgcount; i ++）{
 if if（images [i] .complete == false）{
 ok = 0; 
} 
} 
 
 if（ok == 1）{
 clearInterval（interval）; 
 showIndexOnLoad（）; 
} 
}，1000）; 
  

等待所有图像完成并且只触发 showIndexOnLoad（）

现在所有图像都按照我想要的方式显示，所有图像一次都没有额外的等待为GETs赶上。

做得好的Bart将我带入了

c>完成图片的属性，以查看图片是否已完全加载。

以下是一个示例。

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）; 
}; 
  

注意：此示例在出现错误时未能清除间隔，完成永远不会设置为 true 。
$ b

更新

我写了一个简单的 jQuery.preload插件利用 image.complete 属性。

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;

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

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

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?

EDIT 1

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 ++;
}

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);

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

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

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

解决方案

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

Here's an example.

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);
};

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

Update

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

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