FireFox 中的 `complete` 属性有哪些解决方法？答案

【问题标题】：What workarounds exist for the `complete` property in FireFox?FireFox 中的 `complete` 属性有哪些解决方法？
【发布时间】：2009-08-12 20:32:43
【问题描述】：

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

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

    var image = $("img#myImage");
    alert(image[0].complete);

在 JavaScript 或 jQuery 中 image.complete 的 Firefox 等效项是什么？

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

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

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

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

    return true;
}

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

【讨论】：

我也这么认为；但我需要说明的示例之一如下：适用于亚马逊云前端的可能图像之一，如果安全设置使得文件存在，但访问被拒绝；然后它实际上向该调用返回一些 XML 内容，浏览器返回的高度为 15，宽度为 60。（或类似的任意值）
有趣...如果我遇到解决方案，我会再次发布。

【解决方案2】：

Jquery 让它变得非常简单。

您可以使用 .load() 函数在图像完全加载时绑定事件。

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

【讨论】：

如果图像被缓存，IE8 不会触发加载事件。请参阅 David Walsh 的这篇博文：davidwalsh.name/image-load-event
上述评论也适用于 MS Edge。

【解决方案3】：

是的，我只是在处理动态加载图像的 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);

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

西蒙。

【讨论】：

【解决方案4】：

您可以使用 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!");
    });
}

【讨论】：

【解决方案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.

【讨论】：

【解决方案6】：

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

$(document).ready(function(){

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

});

【讨论】：

您无法设置图像的完整属性。它将抛出一个错误，因为该属性是只读的。

【解决方案7】：

就我而言，我使用方法

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

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

当我改变使用方法时

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

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

也许它可以帮助你。

【讨论】：