Javascript/jQuery:如何检测img是否完全下载？

Question

我需要做的就是将图像定位在其父div的中心.
首先,我尝试了这个.

$(document).ready(function() { 
    $('#image1').css({
    'top': 50%, 'left': 50%,
    'margin-top': (-$('#image1').height()/2) + 'px',
    'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
});

失败导致$('#image1').height()和width()在完全下载之前给出0.
所以我试着继续检查图像的大小,直到它具有特定的宽度和高度.
喜欢,

function inspectSize() { return ($('#image1').width() != 0); }
function setPosition() {
    if(!inspectSize()) {
        setTimeout(setPosition, 1000);
        return;
    }
    $('#image1').css({
        'top': 50%, 'left': 50%,
        'margin-top': (-$('#image1').height()/2) + 'px',
        'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
}
$(document).ready(setPosition);

它仍然无效.
因为$('#image').width()在IE8下载之前返回28px(顺便说一句,IE7很好)

所以我终于尝试了 像这样的waitForImages jQuery插件,

$(document).ready(function() {
    $('#image1').waitForImages(function() {
         setPosition(); // without inspectSize() 
    });
});

它适用于缓存的图像,但不适用于非缓存的图像.
在Image1具有宽度和高度之前调用该函数.

我该怎么办？

Answer 1

您应该能够将重新定位回调绑定到load事件处理程序.

所以在你的上一个例子中:

$('#image1').load(function() {
     setPosition(); // without inspectSize() 
});

当#image1指向你的形象标签.或者,正如你所提到的那样#image1可能只是一个容器: -

$('#image1 img').load(function() {
     setPosition();
});

更新 jfriend00在下面提到了一个很好的观点,因为'load'只会在将图像添加到DOM时触发,而不是在JavaScript运行时页面上已经存在.

要涵盖这两种情况,您可以执行以下操作:

var img = $('#image1');

if (img.prop('complete')) {
     setPosition();
} else {
     img.load(function() { setPosition(); });
}

该prop('complete')如果图像已经存在,检查将返回true,如果没有,我们绑定"负荷"事件处理程序.