在Chrome中页面刷新(F5)后,jQuery表现得很奇怪

Question

我有一个脚本,在FireFox,IE中运行正常,但仅在F5刷新后才在Chrome中运行!它确实在chrome中工作,如果我关注url地址并单击enter,但是如果我按F5它不起作用,我根本没有得到它,这怎么会对jQuery代码产生影响.

所以这是脚本:

$(document).ready(function() {
    var width = 0;
    $('#gallery img').each(function() {
    width += $(this).outerWidth(true);
    });

    $('#offer #gallery').css('width', width + 'px');
});

Width的结果应该是820,但是如果我通过聚焦url地址并单击enter来刷新站点,我只会得到这个,否则它会得到90的结果.

我尝试重新启动浏览器并删除缓存,所以问题不存在,有什么想法吗？

Answer 1

要纠正此问题,请使用:

$(window).load(function() {});

而不是:

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

Answer 2

我猜这是因为触发ready()事件时尚未加载图像,而18px是图像占位符图标的大小.按F5会导致页面中的所有资源重新加载,而普通导航则不会.

您可以尝试使用load()调用替换ready()调用,或者在img标记中提供width和height属性,以便在加载图像之前知道它们的大小.

来自.load()的JQuery API:

当load和所有子元素已完全加载时,load事件将发送到元素.

从.ready():

虽然JavaScript提供了在呈现页面时执行代码的加载事件,但在完全接收到所有资产(如图像)之前,不会触发此事件.在大多数情况下,只要完全构造DOM层次结构,就可以运行脚本.