仅在页面重新加载时工作的脚本

Question

我正在使用 jQuery 来对齐水平视图网站上的图像，但该脚本仅在我重新加载页面时才有效。

http://joliannelm.steveforest.com/edition/roux-de-service.html

脚本在之前调用

这是脚本：

$(document).ready(function() {

    var width = 0;

    $('#page img').each(function() {
        width += $(this).outerWidth(true);
    });

    $('#page').css('width', width + 50);

});

一旦页面被重新加载就可以了，但是如果你清除缓存，它又回来了......

有人知道为什么吗？谢谢。

Answer 1

这可能是一个时间问题：当 DOM 准备好时会触发 ready 事件 - 这可能是在加载图像之前。因为您没有为图像提供固定的width 属性，所以您需要先加载它们，然后才能知道它们的宽度。

这是load event 最合适的触发器。

$(window).load(function() {  ... your code here

与ready 不同，load 将等待所有相关文件 - 图像、样式表、JavaScript 文件等。