窗口加载事件在具有缓存的文档就绪事件之前触发 [英] the window load event fires before that document ready event with cache

问题描述

新版本的 chrome 奇怪的事情开始发生，它开始投掷事件 $（window）.load（...） / code> $ {code> $（document）.ready（...）或 $（function（）{...} ）。

With the new version of chrome something strange began to happen, it started throwing events $(window).load(...) before the event $(document).ready(...) or $(function (){...}).

以前的chrome版本没有发生，31版本开始发生。

This did not happen in previous versions of "chrome", and began to happen with version 31.

我的环境：

jQuery 1.7.2
Chrome 31
IIS 7.5
ASP.NET MVC 4

我不明白，如果我们首先进入没有缓存的工作完美，但是随着缓存文件css，js，img，开始生产这个问题。

I do not understand, but it happens so, if we first entered without cache works perfectly, but then with cache files css, js, img, start producirce this problem.

我目前的解决方案是覆盖函数加载 jquery ，但我认为是正确的解决方案。

My current solution is to overwrite the function load of jquery, but I think that is the right solution.

谢谢。

修改

服务器，我们无法在本地复制（localhost）

we can only play if the site on the server, we can not reproduce it locally (localhost)

编辑更多信息
这是服务器的HTTP头：

Edit for more info This is a HTTP header of server:

HTTP/1.1 200 OK
Cache-Control: private, s-maxage=0
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNetMvc-Version: 3.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 21 Nov 2013 23:02:37 GMT
Content-Length: 176350

编辑II

我测试了这个代码，以了解是否是jQuery 1.7.1的问题，但是发生同样的问题：

I tested this code to know if it is a problem with jQuery 1.7.1, but the same problem happened:

(function() {

    if(!window.addEventListener || !document.addEventListener) {
        console.log('not supported window.addEventListener');
    }

    var timeDCL;

    function addListener(obj, eventName, listener) {
        obj.addEventListener(eventName, listener, false);
    }

    function finishedDCL() {
        timeDCL = new Date();
        console.log('DONE document load/ready');
    }

    function finishedLoad() {
        if(timeDCL) {
            var delta = new Date() - timeDCL;
            console.log(delta + 'ms', 'DONE window load');
        }
        else {
            console.log('Ups DONE first window load');
        }
    }

    addListener(document, "DOMContentLoaded", finishedDCL);
    addListener(window, "load", finishedLoad);
}());

结果：

Ups DONE first window load
DONE document load/ready

推荐答案

TL; DR

不要依赖加载来始终遵循 DOMContentLoaded 。

我知道我迟到了，但其他人可能会在这里结束，所以我发布了这个。
当对DOM就绪实施的单元测试随机失败时，我碰到了这种行为。我发现原因是它假定窗口加载事件始终在 DOMContentLoaded 之后。

I know I'm late in the game, but others might end up here, so I'm posting this. I bumped into this behavior when a unit test on a "DOM ready" implementation randomly failed. I found out that the reason was that it assumed that the window load event always came after DOMContentLoaded.

在至少在Chrome - 目前在版本52 - 一些压力条件（可能涉及不那么小的JavaScript库，如jQuery，但我不能说肯定）可以发生，以便花费很长时间解析DOM，这会延迟 DOMContentLoaded 事件。

At least in Chrome - currently at version 52 - some stress conditions (possibly related to not-so-small javascript library, such as jQuery, but I can't say for sure) can occur so that a long time is spent parsing the DOM, which delays the DOMContentLoaded event.

请注意，在每次单次故障中，加载事件仅在1ms之前被触发。

Note that in every single failure the load event was fired just 1ms earlier.

它真的看起来像浏览器可以同时触发两个事件，并首先选择与DOM一起去。无论什么原因。

It really looks like the browser is available to fire the two events at the same time, and chooses to go with the DOM first. For whatever reason.

jQuery.ready实际上是在窗口加载之后。

jQuery.ready in fact fallbacks on window load.

这篇关于窗口加载事件在具有缓存的文档就绪事件之前触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！