After the Dom is loaded, it is not understood, and based on some method logic on the Internet, so I went to see jquery Source code Research (ready function) Article Write as follows Code (Details already exist)
Copy code The Code is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> document. Ready </title>
<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.3.2.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR Darren;
(Function (){
VaR isready = false; // whether the load has been completed
VaR readbound = false; // determines whether a cyclic event has been called.
VaR readylist = []; // Save the method to be executed in this array
// Judge the browser. This method is from cloudgamer JavaScript library v0.1
VaR browser = (function (UA ){
VaR B = {
MSIE:/MSIE/. Test (UA )&&! /Opera/. Test (UA ),
Opera:/Opera/. Test (UA ),
Safari:/WebKit/. Test (UA )&&! /Chrome/. Test (UA ),
Firefox:/Firefox/. Test (UA ),
Chrome:/Chrome/. Test (UA)
};
VaR vmark = "";
For (var I in B ){
If (B [I]) {
Vmark = I;
}
}
If (B. Safari ){
Vmark = "version ";
}
B. Version = Regexp ("(? : "+ Vmark +") [\/:] ([\ D.] +) "). Test (UA )? Regexp. $1: "0 ";
B. Ie = B. MSIE;
B. IE6 = B. MSIE & parseint (B. Version) = 6;
B. IE7 = B. MSIE & parseint (B. Version) = 7;
B. IE8 = B. MSIE & parseint (B. Version) = 8;
Return B;
}) (Window. Navigator. useragent. tolowercase ());
Function bindready ()
{
If (readbound) {// ensure that the bindready method is executed only once
Return;
}
Readbound = true;
// For IE and not nested in the frame
If (browser. MSIE & window = top)
{
(Function (){
If (isready ){
Return;
}
Try {
Document.doc umentelement. doscroll ("Left"); // If the Dom is not loaded, an error is returned.
}
Catch (error ){
SetTimeout (arguments. callee, 0); // call the parent function cyclically, that is, the ready method.
Return;
}
Test. Done ();
})();
} Else if (browser. Firefox) // for FF
{
Document. addeventlistener ("domcontentloaded", test. Done, false );
}
}
VaR test = {
Ready: function (FN ){
Bindready (); // determines whether the load has been completed.
If (isready)
{
FN. Call (document); // call directly after loading
} Else {
Readylist. Push (FN); // Save the method to the readylist array if it has not been loaded.
}
Return this;
}
};
// Static method: Load finished and executed
Test. Done = function (){
If (! Isready ){
Isready = true;
}
Readylist [0]. Call (document );
}
Darren = test;
})();
// Test
Darren. Ready (function (){
Alert ("my ");
Document. getelementbyid ("test"). innerhtml = "Haha" // The Dom is read successfully.
});
$ (Function () {alert ("JQ ")});
Window. onload = function () {alert ("default ")}
</SCRIPT>
</Head>
<Body>
<Div id = "test"> test </div>
</Body>
</Html>
To compare with JQ, You need to import the JQ library during testing. The function itself does not call JQ. Please reference it with confidence.
The code is encapsulated and can be executed directly by Darren. Ready (FN.
After passing the test, there was still a strange problem: the execution sequence under fF was JQ-> my-> load. That is to say, this function can be triggered before the onload event is executed, but it will be later than the ready of JQ. We are satisfied with this.
However, in IE, the test result is: JQ-> load-> my. That is to say, although this function can advance the code, it is triggered after the onload event is executed and cannot be understood.
After my comrades answered how to execute JQ before onload is implemented, I fully simulate the JQ structure, but it still cannot be achieved. Is there any leakage in the middle?
For more information, see copy Code the code is as follows: var ready = function (readycall) {
If (document. addeventlistener)
document. addeventlistener ("domcontentloaded", function () {
document. removeeventlistener ("domcontentloaded", arguments. callee, false);
readycall ();
}, false);
else if (document. attachevent) {// for IE
if(document.doc umentelement. doscroll & window. self = Window. top) {
(function () {
try {
document.doc umentelement. doscroll ("Left");
}catch (Ex) {
setTimeout (arguments. callee, 5);
return;
}< br> readycall ();
})();
} else {// maybe late but also for iframes
document. attachevent ("onreadystatechange", function () {
If (document. readystate = "complete") {
document. detachevent ("onreadystatechange", arguments. callee);
readycall ();
}< BR >});
}< BR >}
