javascript - 如何检查图片是否加载？

Question

如何检查图片是否已加载？

image.src = ay.url_static + 'uploads/apps/' + thumbnail.uid + '.png';
image.onload = function(e)
{                   
    // [..]
};

我知道如何在加载图像时触发回调，但我如何检查图片是否已加载？

Answer 1

我不确定您想要什么，但据我了解，您需要知道是否随时加载图像，对吗？

我有一个功能可以检查图像是否有效。如果需要，您也可以使用它来查看图像是否已经加载。如果您不想知道图像是否有效，则可以仅使用 img.complete 属性。

function IsImageLoaded(img) {

    if (!img.complete) {
        return false;
    }

    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }

    return true;
}

Answer 2

设置image.loaded = false，然后image.loaded = true在您的 onload 回调中设置并稍后检查该属性？

或者 image.complete 似乎是一个合法的财产，如果不是 W3C 的话。

Answer 3

假设您正在使用 jQuery ...

image.onload = function(e)
{                   
    $(this).data({loaded: true});
};

之后...

if($(yourImage).data('loaded')) {
  // it's loaded!
} else {
  // it's not
}

jQuery.data()非常适合设置特定于元素的变量。