jQuery在Chrome中的页面刷新（F5）后表现奇怪答案

【问题标题】：jQuery behaving strange after page refresh (F5) in ChromejQuery在Chrome中的页面刷新（F5）后表现奇怪
【发布时间】：2011-06-28 10:22:52
【问题描述】：

我有一个脚本，它在 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 地址并点击回车来刷新站点时才会得到这个，否则它给出的结果是 90。

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

【问题讨论】：

嗯，图片大小不一样，但是按F5的情况下，宽度总是18。不知道为什么。
如果将某些内容记录到控制台.. 您是否在认为脚本未运行时看到了这一点？
console.log($(this).outerWidth(true)); F5 刷新后返回 5x 18，如果我以任何其他方式进入页面，则返回 178、108、3x178。
所以最后我用PHP计算了宽度，但是我还是不知道为什么不能使用outerWidth函数。

标签： jquery google-chrome

【解决方案1】：

要纠正这个问题，请使用：

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

输出而不是：

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

【讨论】：

谢谢，我被困了好几个小时！
你是一个绝对的传奇！
在 jQuery 3.0 及更高版本上不起作用 - 它已被弃用。我的答案中有新的解决方案。

【解决方案2】：

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

您可以尝试用 load() 调用替换 ready() 调用，或者在 img 标签中提供宽度和高度属性，以便在加载图像之前知道它们的大小。

来自JQuery API for .load()：

加载事件被发送到一个元素当它和所有子元素已经完全加载。

来自.ready()：

虽然 JavaScript 提供负载页面时执行代码的事件被渲染，这个事件没有得到触发，直到所有资产，如图像已完全接收。大多数情况下，脚本可以运行一旦 DOM 层次结构已经完全构建。

【讨论】：

你是一个绝对的传奇！

【解决方案3】：

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

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

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

解决了我的问题。

【讨论】：

【解决方案4】：

如果您有 jQuery 3.0 及更高版本，请使用：

$(window).on("load", function(){
   // Do your work
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：