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属性，以便在加载图像之前知道它们的大小。

来自JQuery API for .load()：

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

来自.ready()：

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

Answer 3

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

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

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

解决了我的案件。

Answer 4

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

在Chrome中页面刷新（F5）后，jQuery表现得很奇怪

4 个答案: