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

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() 将立即执行该函数并将函数的返回值分配给 $(window)< 的属性“load” /代码>

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

作为旁注，您不应该养成在语句末尾省略 ; 的习惯，例如你在原来的代码中做了。我已经在我的代码片段中修复了这个问题。