Question

我正在使用一些jQuery在一个简单的小幻灯片中将图像和文本重新定位到窗口的中心。当然，我必须等到图像加载之后再进行此操作，否则它们的大小为0，图像放置在页面中间的左上角，而不是正确偏移。

为了确保加载图像，我将javascript函数附加到$（window）.load，如下所示：

$(window).load = start_slideshow()
function center() {
    e = $(this)
    e.css("position","absolute");
    e.css("top", (($(window).height() - e.outerHeight()) / 2) + $(window).scrollTop() + "px");
    e.css("left", (($(window).width() - e.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

function start_slideshow() {
    $(".text").each(center);
    $(".image").each(center);
    $(".slide").each(function() { $(this).hide() } );
    next_slide()
}

大部分时间都可以使用。然而，有时当刷新图像偏离中心时，它的左上角坐标位于中间，就像javascrpt被调用时没有被加载一样。我在移动Safari上看到这可能是五次中的一次。

我没有对图片做任何特别的事情：

<div class="image">
    <img src="http://4.bp.blogspot.com/_OxhGU7eVQls/TQ_8RSFptmI/AAAAAAAAAF0/2pKKeDQEK1A/s1600/rainPA_468x409.jpg" />
</div>

在下载所有资源之后，

window.onload应该是，那么为什么有时会在图像正确设置其大小之前执行javascript？如果window.onload不能可靠地执行此操作，那么确保加载所有图像的正确方法是什么？

Answer 1

应该是：

$(window).load(start_slideshow)

start_slideshow()将立即执行该函数，并将函数的返回值分配给load的属性“$(window)”

Answer 2

您正在使用jQuery。您不应该使用$(window).load。

使用jQuery在页面加载上运行代码的正确方法是：

$(document).ready( function() {
  ... your on load code here...
});

所以在你的情况下你会写：

function center() {
    e = $(this);
    e.css("position","absolute");
    e.css("top", (($(window).height() - e.outerHeight()) / 2) + $(window).scrollTop() + "px");
    e.css("left", (($(window).width() - e.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

function start_slideshow() {
    $(".text").each(center);
    $(".image").each(center);
    $(".slide").each(function() { $(this).hide(); } );
    next_slide();
}

$(document).ready( function() {
  start_slideshow();
});

作为旁注，你不应该像在原始代码中那样养成在语句末尾省略;的习惯。我在我的片段中修复了这个问题。

window.onload有时会在图像设置大小之前触发

2 个答案: