改变多个jquery.ready的默认顺序
程序员文章站
2022-07-08 16:30:15
...
$(document).ready
这个函数的解释：
Description: Specify a function to execute when the DOM is fully loaded.
version added: 1.0.ready( handler )
handler
Type: Function()
A function to execute after the DOM is ready.
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.
The .ready() method is generally incompatible with the <body onload=""> attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.
改变顺序的办法
However, a quick look at the $(document).ready() internals shows a way to get what we want.
ready: function(fn) {
// Attach the listeners
bindReady();
// If the DOM is already ready
if ( jQuery.isReady )
// Execute the function immediately
fn.call( document, jQuery );
// Otherwise, remember the function for later
else
// Add the function to the wait list
jQuery.readyList.push( fn );
return this;
},
It's not really important to understand everything that's going on here, so don't worry about the Javascript. First, the function tells the browser to alert jQuery when it's done loading. Next, it checks if the browser is already ready, to see if you're running a function long after the page has already loaded. If the page is ready, jQuery will just run the function immediately. But if the page hasn't finished loading (the usual case for $(document).ready() logic), your function gets put on the end of a jQuery.readyList array. This is what we're after.
Before the page is finished loading, all of the functions added through $(document).ready() are put on the jQuery.readyList variable. If you want to change the order in which these functions are executed, all you have to do is alter this array.
Here's what it would look like to put your function at the front of the line for execution:
// Adding a function to $(document).ready() the regular way
$(document).ready(function() {
// processing happens here
});
// Adding a function to the front of the list
$.readyList.unshift(function() {
// processing here
});
Of course, this shouldn't be overused. Other jQuery authors expect functions to run in the order they're added, so they might be thrown off if the readyList is modified too much. Still, a small change like this can save a lot of headache in the right situation.
$(document).ready函数会在所有的js文件加载完成后执行
这个函数的解释：
引用
Description: Specify a function to execute when the DOM is fully loaded.
version added: 1.0.ready( handler )
handler
Type: Function()
A function to execute after the DOM is ready.
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.
The .ready() method is generally incompatible with the <body onload=""> attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.
改变顺序的办法
引用
However, a quick look at the $(document).ready() internals shows a way to get what we want.
ready: function(fn) {
// Attach the listeners
bindReady();
// If the DOM is already ready
if ( jQuery.isReady )
// Execute the function immediately
fn.call( document, jQuery );
// Otherwise, remember the function for later
else
// Add the function to the wait list
jQuery.readyList.push( fn );
return this;
},
It's not really important to understand everything that's going on here, so don't worry about the Javascript. First, the function tells the browser to alert jQuery when it's done loading. Next, it checks if the browser is already ready, to see if you're running a function long after the page has already loaded. If the page is ready, jQuery will just run the function immediately. But if the page hasn't finished loading (the usual case for $(document).ready() logic), your function gets put on the end of a jQuery.readyList array. This is what we're after.
Before the page is finished loading, all of the functions added through $(document).ready() are put on the jQuery.readyList variable. If you want to change the order in which these functions are executed, all you have to do is alter this array.
Here's what it would look like to put your function at the front of the line for execution:
// Adding a function to $(document).ready() the regular way
$(document).ready(function() {
// processing happens here
});
// Adding a function to the front of the list
$.readyList.unshift(function() {
// processing here
});
Of course, this shouldn't be overused. Other jQuery authors expect functions to run in the order they're added, so they might be thrown off if the readyList is modified too much. Still, a small change like this can save a lot of headache in the right situation.
$(document).ready函数会在所有的js文件加载完成后执行
上一篇： find 的正则表达式
下一篇： linux 安装mysql多个实例
推荐阅读