4

我需要做的就是将图像定位在其父 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具有宽度和高度
之前调用该函数。 我该怎么办？

4

3 回答 3

6

您应该能够将您的重新定位回调绑定到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' 事件处理程序。

于 2011-12-23T08:02:54.230 回答
1

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

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

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

于 2011-12-23T08:02:11.830 回答
1

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

$('window').load(function() {
    // Your code here..
});
于 2011-12-23T08:06:48.047 回答