javascript - 如果图像已经加载，如何传递 .load() ？

Question

我有以下问题。

我有一个 Web 应用程序，如果我单击图标，它会显示图像。

$('#ModalArtImage img').load(function(){ 
    $('#ModalArtImage').css('visibility','visible').zIndex(9999);
});

这很好用。

要关闭刚刚打开的 DIV(图像容器)，我使用这个

$('.imgWindow').on('click', function(){
    $(this).parent().css('visibility','hidden');
});

.imgWindow 是总窗口(Imagecontainer)。

如果我关闭图像容器并再次按该图标，则图像已从第一次点击，它不会访问 .load()，因此 imagecontainer 不再显示。

我使用.load()的原因是，我不想在应该显示的图像完全加载之前显示图像容器。所以我尝试通过 .load('img') 检查它的实际效果。

有办法解决这个问题吗？

编辑:

现在解决这个问题:

if( $('#ModalArtImage img').prop('complete') )
{
    $('#ModalArtImage').css('visibility','visible').zIndex(9999);
}
else
{
    $('#ModalArtImage img').load(function(){ 
        $('#ModalArtImage').css('visibility','visible').zIndex(9999);
    });
}

感谢sahbeewah

Answer 1

img 元素上有一个 complete 属性，用于显示图像是否已完成加载。

var showImage = function() {
    $('#ModalArtImage').css('visibility','visible').zIndex(9999);
};

var $img = $('#ModalArtImage img');

if ($img.prop('complete')) {
    showImage();
} else {
    $img.load(showImage);
}