Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

the window load event fires before that document ready event with cache

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

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

My environment:

jQuery 1.7.2
Chrome 31
IIS 7.5
ASP.NET MVC 4

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.

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

Thank.

Edit

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

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

Edit II

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);
}());

Result:

Ups DONE first window load
DONE document load/ready
like image 876
andres descalzo Avatar asked Nov 12 '22 18:11

andres descalzo


1 Answers

TL;DR
Don't rely on load to always follow 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.

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.

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

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 in fact fallbacks on window load.

A screenshot of DevTool in one such occasions

like image 100
mjsarfatti Avatar answered Jan 04 '23 03:01

mjsarfatti