Question

我正在尝试使用jQuery来确定图像是否已正确加载。

以下工作正常（并且从图像状态返回true或false）但似乎只在IE中工作，在FireFox中，似乎总是返回{{1} - 即使状态实际上是不完整的：

true

JavaScript或jQuery中var image = $("img#myImage"); alert(image[0].complete);的Firefox等价物是什么？

Answer 1

除了img之外，您还可以尝试检查complete元素的其中一个维度：

function isImageLoaded() {
    var theImage = $('#myImage'); 

    if (!theImage.get(0).complete) {
        return false;
    }
    else if (theImage.height() === 0) {
        return false;
    }

    return true;
}

具有无效img属性的已卸载img或src应该在Firefox中.height()和.width()等于0。在Chrome和Opera中，这两种方法似乎都无法正常工作。在这些浏览器中theImage.height()总是在我的测试中返回正值。

Answer 2

Jquery让它变得非常简单。

您可以使用.load（）函数将事件绑定到图像完全加载的时间。

    $("img").load(function() {
        // Yeay, it was loaded, and works in all browsers!
    });

Answer 3

您可以使用load（）但要注意Internet Explorer：如果图像被缓存，它将不会触发事件

if($img[0].readyState === 4){ // image is cached in IE
    alert("Image loaded!");
}else{
    $img.load(function(){ // for other browsers and IE, if not cached
        alert("Image loaded!");
    });
}

Answer 4

是的，我刚刚在一个动态加载图像的AJAX页面上工作。我还想检测图像是否已加载，因此我可以使用jQuery效果转换它们。

img = $('myImageID')
img[0].src = 'http://new.url.for.image/';
alert(img[0].complete);                    // seems to always return true
                                           // in Firefox, perhaps because
                                           // the original src had been loaded

所以我不得不这样做......

img = $('myImageID')
newImg = $('<img>')                // create a completely new IMG element
          .attr('src', 'http://new.url.for.image/')
          .attr('id', img[0].id);
img.replaceWith(newImg);
img = newImg;
alert(img[0].complete);

（注意：我没有测试过这个确切的代码，它是我试图做的简化版本，但希望能传达这个想法。）

<强>西蒙。

Answer 5

myimage=new Image();
myimage.src="whatever";
if(myimage.height>0 && myimage.complete){alert("my image has loaded");}

// might be overly simple but works for me in all browsers i think.

Answer 6

我不知道firefox是否有另一个prop，方法可以做到但是，你可以使用这个解决方法：

（文档）$。就绪（函数（）{

$("img").each(
//for each image declared in html
function(index)
{
    document.images[index].complete= false;
    document.images[index].onload = function(){ this.complete= true};
});

}）;

Answer 7

在我的情况下，我使用方法

document.images['XXX'].addEventListener('load', dealJob(), false);

在函数dealJob中，我使用document.images ['XXX']。完成检查图像，但它总是返回true。

当我改为使用方法

时

document.images['XXX'].onload = function() {dealJob();}

并且在函数dealJob中，document.images ['XXX']。完成的结果是正确的。

也许它可以帮到你。

FireFox中的`complete`属性有哪些变通方法？

7 个答案: