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();
});

Update jfriend00在下面提出了一个很好的观点，因为'load'只会在图像被添加到DOM时触发，而不是在JavaScript运行时它已经存在于页面上。

要涵盖这两种场景，您可以这样做:

var img = $('#image1');
if (img.prop('complete')) {
     setPosition();
} else {
     img.load(function() { setPosition(); });
}

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

Answer 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"));设置为新的src

Answer 3

尝试在内部编写相同的代码。

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