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。
所以我试着继续检查图像的大小，直到它具有特定的宽度和高度。
喜欢，

 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，如果不存在，我们将绑定’load’事件处理程序。

Answer 2

一个简单的例子是将load事件绑定到图像。 我总是这样做

请注意，我还没有设置src属性

 $(function() { $("img").each(function() { $(this).load(function() { alert('ready to call $(this).width()'); }).prop("src", $(this).prop("data-src")); }); }); 

.prop("src", $(this).prop("data-src")); 在绑定load事件后设置新的src

Answer 3

尝试在里面写相同的代码。

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