Question

我需要一个跨浏览器解决方案来查找图片是否已完成加载。

我知道这个：

var theImage = new Image()
theImage.src = 'http://pieisgood.org/images/slice.jpg' //yum, pie :)
//later...
if (theImage.complete) {
    //do stuff
}

这是跨浏览器兼容（我的意思是FF，Chrome，Safari，Opera，IE8 +）？如果没有，我如何在跨浏览器和jQuery-less方式中执行此操作？

Answer 1

东西：

var theImage = new Image()
theImage.src = 'http://pieisgood.org/images/slice.jpg' //yum, pie :)
theImage.isLoaded = false;
//later...
theImage.onload = function(){
    theImage.isLoaded = true;
    //do stuff
}
if(theImage.isLoaded){
    alert("Loaded");
}
document.body.appendChild(theImage); // VERY needed

应该工作。

就像图像真正加载时设置属性一样。：）

Answer 2

我认为你可以使用'onload'事件。

image.onload = function() {
};

在设置图像的'src'之前，应该绑定它。

Answer 3

或者只是通过html控制它并在指定的img onload事件上调用你的函数

<img src="whatever.png" onload="dostuff()" />

检查是否加载了图像，跨浏览器

3 个答案: