Dom after the completion of the implementation, has not been understood, based on some of the online method of logic does not understand, so go to the jquery source code research (ready function) of this article, write the following code (already detailed)
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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 completed
var Readbound=false; To determine if a circular event has been invoked
var readylist=[]; Put the methods that need to be executed in this array first.
To judge the browser, this method comes from the 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 Bindready method executes only once
Return
}
Readbound=true;
For IE and not nested in frame
if (Browser.msie && window==top)
{
(function () {
if (IsReady) {
Return
}
try {
Document.documentElement.doScroll ("left"); If the DOM is not loaded, this will be an error.
}
catch (Error) {
settimeout (Arguments.callee, 0); Loop call parent function, i.e. ready method
Return
}
Test.done ();
})();
}else if (browser.firefox)//for FF
{
Document.addeventlistener ("domcontentloaded", Test.done, false);
}
}
var test={
Ready:function (FN) {
Bindready ()//Determine if loading is complete
if (IsReady)
{
Fn.call (document); Load complete, call directly
}else{
Readylist.push (FN);//If the completion is not completed, the method is staged to the readylist array for later invocation
}
return this;
}
};
static method: Load Complete execution
Test.done=function () {
if (!isready) {
Isready=true;
}
Readylist[0].call (document);
}
Darren=test;
})();
Test
Darren.ready (function () {
Alert ("my");
document.getElementById ("Test"). Innerhtml= "haha"//Read DOM successfully
});
$ (function () {alert ("JQ")});
Window.onload=function () {alert ("Default")}
</script>
<body>
<div id= "Test" >test</div>
</body>
Because to compare with JQ, so the test time needs to import JQ library. The function itself is not invoked JQ, please be assured to reference.
The code I complete by encapsulation, direct Darren.ready (FN) can be executed.
Then there was a strange problem with testing: the order of execution under FF was JQ-> my-> load. That is, I can trigger this function before the OnLoad event executes, but it will be later than the JQ ready. This is still relatively satisfactory.
But in IE under the test is actually: JQ-> load-> My. This is my function, although it can put the code in advance, but still in the OnLoad event after the execution of the trigger, baffled.
After the comrades to solve how to implement the onload before the implementation of the JQ is how to achieve, I completely simulate the structure of JQ, but still can not achieve the purpose, is there a leak in the middle?
Other people can refer to the following code
Copy Code code 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.documentElement.doScroll && window.self== Window.top) {
(function () {
try {
Document.documentElement.doScroll ("left");
}catch (ex) {
settimeout (arguments.callee,5);
return;
}
Readycall ();
}) ();
}else {//maybe late but also for IFRAMEs
Document.attachevent ("onReadyStateChange", function () {
if (documen t.readystate=== "complete") {
Document.detachevent ("onreadystatechange", Arguments.callee);
Readycall ();
}
});
}
}
}
