Skip to main content
 首页 » 编程设计

jquery之窗口加载事件在带有缓存的文档就绪事件之前触发

2026年07月28日5thcjp

随着新版本的 chrome 开始发生一些奇怪的事情,它开始在事件 之前抛出事件 $(window).load(...) $(document).ready(...) 或 $(function (){...})。

这在以前版本的“chrome”中没有发生,并且在版本 31 中开始发生。

我的环境:

jQuery 1.7.2 
Chrome 31 
IIS 7.5 
ASP.NET MVC 4 

我不明白,但是事情就是这样,如果我们第一次进入没有缓存的情况下工作正常,但是然后用缓存文件css,js,img,开始产生这个问题。

我当前的解决方案是覆盖jquery的函数load,但我认为这是正确的解决方案。

谢谢。

编辑

我们只能在服务器上的站点上播放,我们无法在本地(localhost)重现它

编辑以获取更多信息 这是服务器的 HTTP header :

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 

编辑二

我测试了这段代码,看看是否是 jQuery 1.7.1 的问题,但同样的问题发生了:

(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
不要依赖 load 来始终遵循 DOMContentLoaded。

<小时 />

我知道我在游戏中迟到了,但其他人可能会在这里结束,所以我发布了这个。 当“DOM 就绪”实现的单元测试随机失败时,我遇到了这种行为。我发现原因是它假设窗口 load 事件总是在 DOMContentLoaded 之后发生。

至少在 Chrome 中 - 目前版本为 52 - 可能会出现一些压力情况(可能与不那么小的 javascript 库有关,例如 jQuery,但我不能肯定),因此会花费很长时间解析 DOM,这会延迟 DOMContentLoaded 事件。

请注意,在每次失败时,load 事件都会提前 1 毫秒触发。

看起来浏览器确实可以同时触发这两个事件,并选择首先使用 DOM。无论出于何种原因。

jQuery.ready 实际上是在窗口加载上进行回退。