After the DOM of the web page is loaded, we will process some business logic, but sometimes we need to do some other tasks before the loading is completed. At this time, we need to understand the delayed ready event.
Overview of the jquery help documentation:
Pause or resume execution of the .ready() event.
The $.holdReady() method allows the caller to delay the jQuery ready event. This advanced functionality, typically using dynamic script loaders, requires loading JavaScript such as jQuery plugins, such as an additional ready event before the event occurs, even when the DOM may be ready. This method must be called early in the file, in such a <head> tag immediately after the jQuery script. Calling this method after the ready event will have no effect even if it has already been emitted.
To delay the ready event, call $.holdReady(true) for the first time. $.holdReady(false) is called when the ready event should execute. Note that multiple holds can be placed on the ready event, one by one for each $.holdReady(true) call. The ready event will not execute until all the corresponding one $.holdReady(false) has been issued and the normal file ready conditions are met.
References:
<body>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
$.holdReady(true);
$.getScript("js/mousetrap.js", function() {
console.log("hold....");
$.holdReady(false);
console.log("hold after....");
});
$(function(){
console.log("ready.....");
});
</script>
</body>
Execution result: hold....
ready.....
hold after....