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

【问题标题】：Javascript/jQuery: How to detect img is fully downloaded or not?Javascript/jQuery：如何检测 img 是否已完全下载？
【发布时间】：2013-01-24 07:00:03
【问题描述】：

我需要做的就是将图像定位在其父 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 plugin 像这样，

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

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

我应该怎么办？

【问题讨论】：

标签： javascript jquery waitforimages

【解决方案1】：

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

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

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

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

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

更新 jfriend00 在下面提出了一个很好的观点，因为“加载”只会在图像添加到 DOM 时触发，而不是在运行 JavaScript 时它已经存在于页面上时触发.

要涵盖这两种情况，您可以这样做：

var img = $('#image1');

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

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

【讨论】：

thanx :) 顺便问一下，它是跨浏览器解决方案吗？
是的，load 至少会被 IE6+ 支持，就像jQuery Browser Compatibility 一样。 PS，如果它确实回答了您的问题，请不要忘记将其标记为答案:)
@Sang - 在图像已经开始加载之后使用 .load() 的一个问题是它可能已经完成，然后您将不会收到加载事件。所以，如果你打算这样做，你必须首先检查它是否已经加载，只有在没有加载的情况下，你才能附加加载事件。请记住，浏览器缓存中的图像加载速度可能非常快（比来自 Web 服务器的图像快得多）。所以，这个答案（以及所有其他只推荐 .load() 的答案都不是一个完整的解决方案）。
@jfriend00 现在我可以得到它了！谢谢！顺便说一句，你知道为什么 IE 在加载前调用 width() 或 height() 时会给出 28px 吗？我想知道它是否已通过 ($('img').width() == 0 || 28) 加载，但是如果有人使用 28px 大小的图像怎么办？
28px 可能是 IE 在知道真实图像之前显示的占位符图像的大小。我不确定。必须查看您的代码演示。正如 beardtwizzle 所示，您可以检查 .complete 属性。

【解决方案2】：

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

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

请注意，我还没有设置 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")); set 是绑定加载事件后的新src

【讨论】：

你的答案和 beardtwizzle 的答案有什么区别？附加加载事件后是否有任何理由设置“src”属性？
如果在设置.src 之前附加了事件处理程序，您将永远不会错过.load() 事件。

【解决方案3】：

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

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

【讨论】：