JavaScript Encapsulation domcontentloaded Event Instance

This article mainly introduces the JavaScript encapsulation domcontentloaded event instance, domcontentloaded is the unique event of the Ff,opera 9, when all DOM parsing finishes will trigger this event, the need friend can refer to the following

Recently in writing a JavaScript framework, just the Domcontentloaded event encapsulation, slightly small excitement, the development process encountered in the principles and compatibility issues to make a note, the province to forget everywhere looking.

When we write the JS code, The Window.onload event is typically added to select a DOM element to use, such as Getelementbyid,getelementsbytagname, after the DOM finishes loading, but Window.load waits until the DOM is loaded , scripts, CSS, the final load of the picture or even all the resources in the IFRAME will trigger, many times the picture of the page more large, to wait for the final picture this time-consuming big load before the implementation of JS is obviously some too late, many times will affect the user experience.

Many JS frameworks have a document.ready function, such as jquery's $ (document). Ready () method, can execute the JS code immediately after the DOM loading, lets the picture from slowly load.

Document.ready's core is the domcontentloaded event, Firefox, Chrome, Opera, Safari, ie9+ can all use AddEventListener (' domcontentloaded ', Fn,false) for event binding, and Ie6~8 does not support domcontentloaded events, so do compatibility handling for ie6~8.

The data says ie6~8 can use the Document.onreadystatechange event to listen document.readystate State is equal to complete to determine whether the DOM is loaded, if the page is embedded with IFRAME, ie6~ 8 of the document.readystate will wait until all the resources in the IFRAME load will become complete, at this time the IFRAME became a time-consuming large. But after testing, even if the page does not have an IFRAME, when readystate equals complete, the actual trigger is the OnLoad event rather than the Domcontentloaded event, to this point expressed surprise.

Fortunately, IE has a unique doscroll method, when the page DOM is not loaded, when the call DoScroll method, it will be an error, in turn, as long as the interval to call DoScroll until no error, that means that the page Dom loaded completed, This method works regardless of whether the contents of the image or the IFrame are loaded.

If more than one JS file is bound to the Document.ready event, in order to prevent the browser from repeating the binding and executing sequentially, an event queuing mechanism can be introduced to resolve it.

The above is the principle of the Document.ready event and compatibility issues, the following piece of example code, in order to facilitate the understanding of the implementation process, the use of function encapsulation mode, the implementation process are written in the comments, if there are irregularities welcome advice.

To save Domready event queues
EventQueue = [];

To determine if the DOM is finished loading
IsReady = false;

To determine whether Domready is bound
Isbind = false;

/* Execute Domready ()
*
* @param {function}
* @execute press event handlers into the event queue and bind domcontentloaded
* If the DOM load is complete, execute immediately
* @caller
*/
function Domready (FN) {
if (IsReady) {
Fn.call (window);
}
else{
Eventqueue.push (FN);
};

Bindready ();
};

/*domready Event Bindings
*
* @param null
* @execute modern browsers bind domcontentloaded via Addevlistener, including ie9+
Ie6-8 judge whether the DOM is loaded by DoScroll
* @caller Domready ()
*/
function Bindready () {
if (IsReady) return;
if (Isbind) return;
Isbind = true;

if (Window.addeventlistener) {
Document.addeventlistener (' domcontentloaded ', execfn,false);
}
else if (window.attachevent) {
DoScroll ();
};
};

/*doscroll to determine whether Ie6-8 's DOM is loading complete
 *
 * @param     null
 * @execute   DoScroll to determine whether the DOM is loaded complete
 * @caller    bindready ()
 */
Function DoScroll () {
     try{
        document.documentElement.doScroll (' left ');
   }
    catch (Error) {
        return SetTimeout (doscroll,20);
   };
    EXECFN ();
};

/* Execute event queue
*
* @param null
* @execute loop execution of event handlers in queues
* @caller Bindready ()
*/
function Execfn () {
if (!isready) {
IsReady = true;
for (var i = 0; i < eventqueue.length; i++) {
Eventqueue[i].call (window);
};
EventQueue = [];
};
};

JS file 1
Domready (function () {
...
});
JS File 2
Domready (function () {
...
});

Note that if you are loading JS asynchronously, do not bind the Domready method, otherwise the function will not execute,
Since the asynchronous loading of JS download before the domcontentloaded has been triggered, addeventlistener execution has not been listening to the

Test page: are loaded with two large pictures, onload needs to load the picture to perform js,domcontentloaded just wait until the DOM is loaded to execute JS. You can open Firebug to view the loading process, and remember to clean the browser cache before each test.