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

我需要做的就是将图像定位在其父 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。
所以我尝试继续检查图像的大小，直到它具有特定的宽度和高度。
like,

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 插件 https://github.com/alexanderdickson/waitForImages像这样，

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

它适用于缓存图像，但不适用于非缓存图像。
该函数之前被调用过Image1有宽度和高度。

我应该怎么办？

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

所以在你的最后一个例子中：

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

Where #image1指向您的图像标签。或者，正如您提到的#image1那么可能只是一个容器：-

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

Updatejfriend00 在下面提出了一个很好的观点，因为“load”仅在将图像添加到 DOM 时才会触发，而不是在 JavaScript 运行时该图像已存在于页面上。

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

var img = $('#image1');

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

The prop('complete')如果图像已经存在，check 将返回 true，如果不存在，我们将绑定“load”事件处理程序。