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。
所以我一直在检查图像的大小，直到它具有特定的宽度和高度。
像

它仍然不起作用。
因为$（'#image'）.width（）在下载到IE8之前返回28px（顺便说一下，IE7还可以）

所以我终于尝试了 像这样,

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

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

---

我该怎么办

一个简单的示例是将加载事件绑定到映像。我总是这样做

<img data-src="image.jpg" />

---

.prop（“src”），$（this.prop（“datasrc”）在加载事件绑定后设置新的src
您应该能够将重新定位回调绑定到
加载
事件处理程序

在你的最后一个例子中：

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

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

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

Updatejfriend00在下面提出了一个很好的观点，即“加载”只会在图像添加到DOM时触发，而不是在运行JavaScript时页面上已经存在图像时触发

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

var img = $('#image1');

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

如果映像已经存在，
prop（'complete'）
检查将返回true，如果不存在，我们将绑定“load”事件处理程序。
尝试在内部编写相同的代码

$('window').load(function() {
    // Your code here..
});

thanx:）顺便问一下，这是跨浏览器解决方案吗？是的，
load
将至少由IE6+支持。另外，如果它确实回答了您的问题，请不要忘记将此标记为答案：）@Sang-在图像已经开始加载之后使用.load（）的问题是，它可能已经完成，然后您将无法获得加载事件。因此，如果要这样做，必须首先检查它是否已加载，只有在尚未加载时，才可以附加加载事件。请记住，浏览器缓存中的图像加载速度可能非常快（比来自web服务器的图像快得多）。所以，这个答案（以及所有其他推荐的.load（）不是一个完整的解决方案）。@jfriend00现在我可以得到它了！塔克斯！顺便问一下，你知道为什么IE在加载之前调用width（）或height（）时会给出28px吗？我想知道它是否已通过（$（'img'）.width（）==0 | | 28）加载，但如果有人使用28px大小的图像该怎么办？28px可能是IE在知道真实图像之前显示的占位符图像的大小。我不确定。你必须看到你的代码的演示。如beardtwizzle所示，您可以检查
.complete
属性。您的答案和beardtwizzle的答案有什么区别？是否有任何原因导致在附加加载事件后设置“src”属性？如果在设置
.src
之前附加事件处理程序，您将永远不会错过
.load（）
事件。
var img = $('#image1');

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

$('window').load(function() {
    // Your code here..
});