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 plugin 像这样，

$(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在下面提到了一个好处，因为“加载”只会在将图像添加到DOM时触发，而不是在JavaScript运行时页面上已经存在

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

var img = $('#image1');

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

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

Answer 2

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

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

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

3 个答案: