Loading JavaScript events

Generally, window. onload is enough. To load multiple events, we can use the following method:

Window. onload = function () {func1 (); func2 (); func3 (); // more loading events ..................}

But if we need to do something before the page is fully rendered, such as loading other JS files through scripts, or implementing fixed in IE6 ...... Domready is necessary for these things. domready seems to be called by jquery, a loading function. In the W3C draft, it is an event named domcontentloaded. The domcontentloaded event is much faster than the onload event. It is triggered when the DOM tree is built, and the onload event must be triggered only when all the elements of the page are downloaded. It is easy to call this event in the standard browser:

Document. addeventlistener ('domainloaded', function () {alert ("DOM tree built! ")}, False );

Although there are so many private events in IE, none of them are the same. The closest thing is readystatechange. With other messy things, we can still simulate domcontentloaded.

Sometimes, when loading events, we may not load them simply by using a function. For example, I want to use window. onload loads a piece of code, but I also load an open-source plug-in through the JS file. when it wants to process Dom, it still needs to wait until the DOM tree is complete, therefore, it may also need to create a window. onload block. The page has two window. onload code blocks. Obviously, the second will overwrite the first one. In this case, we need to use multiple loading functions such as loadevent.

VaR loadevent = function (FN) {var oldonload = Window. onload; If (typeof window. onload! = 'Function') {window. onload = FN;} else {window. onload = function () {oldonload (); FN ();}}} // ******************** usage ****************** * loadevent (handler1 ); loadevent (handler2); loadevent (handler3 );

In the standard browser, because of the addeventlistener, it is easy to implement multiple loading of domcontentloaded. What should I do with IE? The only method is to execute both addeventlistener and attachevent, and integrate multiple codes to be loaded into one piece for one-time execution. Therefore, we need an array.

Window. domloadevents = []; var adddomloadevent = function (handler) {window. domloadevents [window. domloadevents. length] = handler} adddomloadevent (handler); // more loading events

So how to execute them is just adding events. We need another function dedicated to executing it.

VaR firecontentloadedevent = function () {If (arguments. callee. loaded) return; // Let this function only execute arguments once. callee. loaded = true; var handlers = Window. domloadevents, length = handlers. length; For (VAR I = 0; I <length; I ++) {var func = handlers [I]; func (); // execute the code to be run in domready }}

So when will we execute the above functions? We only discuss the situation of IE. In IE, any dom element has a doscroll method, whether or not they support scroll bars. To determine whether the DOM tree is built, we only need to check whether the documentelement is complete, because it exists as the element of the outermost layer and as the root of the DOM tree. If the documentelement is complete, you can call the doscroll method. When the page loads JS, we will execute this method. Of course, if the documentelement is incomplete, an error will be reported. We will call it again in the catch block until it is successfully executed, you can call the firecontentloadedevent method when execution is successful.

Parameters	Description
Scrollbardown	Default. Down scroll arrow is at the specified location
Scrollbarhthumb	Horizontal scroll thumb or box is at the specified location
Scrollbarleft	Left scroll arrow is at the specified location
Scrollbarpagedown	Page-down scroll bar shaft is at the specified location
Scrollbarpageleft	Page-left scroll bar shaft is at the specified location
Scrollbarpageright	Page-right scroll bar shaft is at the specified location
Scrollbarpageup	Page-up scroll bar shaft is at the specified location
Scrollbarright	Right scroll arrow is at the specified location
Scrollbarup	Up scroll arrow is at the specified location
Scrollbarvthumb	Vertical scroll thumb or box is at the specified location
Down	Composite reference to scrollbardown
Left	Composite reference to scrollbarleft
Pagedown	Composite reference to scrollbarpagedown.
Pageleft	Composite reference to scrollbarpageleft.
Pageright	Composite reference to scrollbarpageright.
Pageup	Composite reference to scrollbarpageup.
Right	Composite reference to scrollbarright.
Up	Composite reference to scrollbarup.

    var  pollDoScroll = function() {        try {            document.documentElement.doScroll('left');        }catch(e) {            setTimeout(arguments.callee, 10);            return;        }        fireContentLoadedEvent();    }

We want to load JS on the page to execute this function immediately. Is it direct polldoscroll ?! Don't forget, it is only applied to IE, we also need to judge the browser. If addeventlistener is supported, domcontentloaded is certainly supported (the old version is not considered). Otherwise, the polldoscroll function is run.

if (document.addEventListener) {    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);} else {    pollDoScroll();}

The complete code is as follows:

Window. domloadevents = []; var adddomloadevent = function (handler) {window. domloadevents [window. domloadevents. length] = handler} var firecontentloadedevent = function () {If (arguments. callee. loaded) return; // Let this function only execute arguments once. callee. loaded = true; var handlers = Window. domloadevents, length = handlers. length; For (VAR I = 0; I <length; I ++) {var func = handlers [I]; func (); // execute the code to run in domready} var polldoscroll = function () {try {document.doc umentelement. doscroll ('left');} catch (e) {setTimeout (arguments. callee, 10); return;} firecontentloadedevent ();} If (document. addeventlistener) {document. addeventlistener ('domainloaded', firecontentloadedevent, false);} else {polldoscroll ();}

<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead id = "head"> <br/> <Meta charset = "UTF-8"/> <br/> <title> event loading by situ zhengmei </title> <br/> <SCRIPT type = "text/JavaScript"> <br/> window. domloadevents = []; <br/> var adddomloadevent = function (handler) {<br/> window. domloadevents [window. domloadevents. length] = handler <br/>}< br/> var firecontentloadedevent = function () {<br/> If (arguments. callee. Loaded) return; <br/> // Let this function be executed only once <br/> arguments. callee. loaded = true; <br/> var handlers = Window. domloadevents, length = handlers. length; <br/> for (VAR I = 0; I <length; I ++) {<br/> var func = handlers [I]; <br/> func (); // execute the code to be run in domready <br/>}< br/> var polldoscroll = function () {<br/> try {<br/> document.doc umentelement. doscroll ('left'); <br/>} catch (e) {<br/> setTimeout (arguments. Callee, 1); <br/> return; <br/>}< br/> firecontentloadedevent (); <br/>}; <br/> If (document. addeventlistener) {<br/> document. addeventlistener ('domainloaded', firecontentloadedevent, false); <br/>} else {<br/> polldoscroll (); <br/>}</P> <p> adddomloadevent (function () {<br/> alert ("complete alert loading on the page! ") <Br/>}); <br/> adddomloadevent (function () {<br/> alert (" test multiload! ") <Br/>}); <br/> adddomloadevent (function () {<br/> alert (" test multiload! ") <Br/> }); <br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <br/> <br/> <br/> <br/> <br /> <Table class = "filament_table" cellspacing = "0" width = "700" rules = "Cols"> <br/> <Col class = "gray" width = "25% "> </COL> <br/> <Col class =" yellow "> </COL> <br/> <thead> <br/> <tr> <br/> <TH> <br/> parameter <br/> </Th> <br/> <TH> <br/> description <br/> </Th> <br/> </tr> <br/> </thead> <br/> <tbody> <br/> <tr> <br/> <TD> <br/> scrollbardown <br /> </TD> <br/> <TD> <br/> default. down scroll arrow is at the specified location <br/> </TD> <br/> </tr> <br/> <TD> <br /> scrollbarhthumb <br/> </TD> <br/> <TD> <br/> horizontal scroll thumb or box is at the specified location <br/> </TD> <br/> </tr> <br/> <TD> <br/> scrollbarleft <br/> </TD> <br/> <TD> <br/> left scroll arrow is at the specified location <br/> </TD> <br/> </tr> <br/> <tr> <br/> <TD> <br/> scrollbarpagedown <br/> </TD> <br/> <TD> <br/> page-down scroll bar shaft is at the specified location <br/> </TD> <br/> </tr> <br/> <TD> <br/> scrollbarpageleft <br/> </ TD> <br/> <TD> <br/> page-left scroll bar shaft is at the specified location <br/> </TD> <br/> </tr> <br/> <tr> <br/> <TD> <br/> scrollbarpageright <br/> </TD> <br/> <TD> <br/> page- right scroll bar shaft is at the specified location <br/> </TD> <br/> </tr> <br/> <TD> <br/> scrollbarpageup <br/> </TD> <br/> <TD> <br/> page-up scroll bar shaft is at the specified location <br/> </ TD> <br/> </tr> <br/> <TD> <br/> scrollbarright <br/> </TD> <br/> <TD> <br/> right scroll arrow is at the specified location <br/> </TD> <br/> </tr> <br/> <tr> <br/> <TD> <br/> scrollbarup <br/> </TD> <br/> <TD> <br/> up scroll arrow is at the specified location <br /> </TD> <br/> </tr> <br/> <TD> <br/> scrollbarvthumb <br/> </TD> <br/> <TD> <br/> vertical scroll thumb or box is at the specified location <br/> </TD> <br/> </tr> <br /> <tr> <br/> <TD> <br/> down <br/> </TD> <br/> <TD> <br/> composite reference to scrollbardown <br/> </TD> <br/> </tr> <br/> <TD> <br/> left <br/> </TD> <br/> <TD> <br/> composite reference to scrollbarleft <br/> </TD> <br/> </tr> <br/> <tr> <br/> <TD> <br/> Pagedown <br/> </TD> <br/> <TD> <br/> composite reference to scrollbarpagedown. <br/> </TD> <br/> </tr> <br/> <TD> <br/> pageleft <br/> </TD> <br/> <TD> <br/> composite reference to scrollbarpageleft. <br/> </TD> <br/> </tr> <br/> <TD> <br/> pageright <br/> </TD> <br/> <TD> <br/> composite reference to scrollbarpageright. <br/> </TD> <br/> </tr> <br/> <TD> <br/> Pageup <br/> </TD> <br/> <TD> <br/> composite reference to scrollbarpageup. <br/> </TD> <br/> </tr> <br/> <TD> <br/> right <br/> </TD> <br/> <TD> <br/> composite reference to scrollbarright. <br/> </TD> <br/> </tr> <br/> <TD> <br/> up <br/> </TD> <br/> <TD> <br/> composite reference to scrollbarup. <br/> </TD> <br/> </tr> <br/> </tbody> <br/> </table> </P> <p> <p> we added images and tables to delay page loading </P> <br/> </body> <br/> </ptml> <br/>

Run code