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


我有一个脚本,在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的结果。

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


15
2018-06-28 10:22


起源


好吧,图像大小不一样,但是在点击F5的情况下,宽度总是18个。不知道为什么。 - Mike
如果将某些内容记录到控制台..您是否认为在您认为脚本未运行的时候? - Duncan_m
的console.log($(本).outerWidth(真));在F5刷新后返回5x 18,如果我以任何其他方式进入页面,则返回178,108,3x178。 - Mike
所以最后,我用PHP来计算宽度,但我仍然不知道为什么我不能使用outerWidth函数。 - Mike


答案:


要纠正此问题,请使用:

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

而不是:

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

20
2017-11-29 11:58



谢谢,这个解决方案救了我的一天。 - arjuncc
谢谢,我被困了几个小时! - Epoc
你是一个绝对的传奇! - edward


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

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

.load()的JQuery API

load事件被发送到一个元素   当它和所有子元素一直存在时   完全装满了。

来自 。准备()

虽然JavaScript提供了负载   用于在页面执行代码的事件   渲染,此事件没有得到   触发,直到所有资产如   图像已被完全接收。   在大多数情况下,脚本可以运行   一旦DOM层次结构出现了   完全构造。


5
2018-06-28 11:00



你是一个绝对的传奇! - edward


尝试调用自定义js库时遇到了类似的问题。我还使用了jquery和jquerymobile的组合。

$(window).load(function() {}); 和 $(document).ready(function() {}); 失败了。使用:

$(document).on("pageinit", function () {});

  解决了我的情况。


1
2018-05-28 15:16