DOM load scripting code that lets a picture load and then executes _javascript tips

Now, let's look at how we can solve this problem by executing the program after the DOM has finished loading.

Two people are introduced first. One, the author of jquery: John Resig II, the world class master of JavaScript: Dean Edwards. (Everyone should remember these two geniuses!) ）

jquery has a function to solve DOM loading $ (document). Ready () (abbreviated is $ (FN)), very easy to use! John Resig in the Pro JavaScript techniques, there's a way to handle DOM loading, which is the principle of document&& document.getElementsByTagName & &document.getElementById&& document.body to determine if the DOM tree is loaded. The code is as follows:

Copy Code code as follows:

function Domready (f) {
If the DOM finishes loading, execute the function immediately
if (Domready.done) return F ();
If we have added a function
if (Domready.timer) {
Add it to the list of functions to be executed
DomReady.ready.push (f);
} else {
Bind an event for page load completion.
To prevent it from being done first. Use Addevent (listed below).
addevent (window, "load", isdomready);
Initializes an array of functions to be executed
Domready.ready = [F];
It is possible to quickly check whether the DOM is available
Domready.timer = SetInterval (Isdomready, 13);
}
}
Check to see if the DOM is operational
function Isdomready () {
If the DOM has been checked out, ignore
if (Domready.done) return false;
Check that several functions and elements are available
if (document && document.getelementsbytagname && document.getElementById && document.body) {
If available, stop checking
Clearinterval (Domready.timer);
Domready.timer = null;
Perform all wait functions
for (var i = 0; i < domReady.ready.length; i++)
Domready.ready[i] ();
The record has been completed here
Domready.ready = null;
Domready.done = true;
}
}
Written by Dean Edwards in 2005 Addevent/removeevent,
Sorted by Tino Zijdel
http://dean.edwards.name/weblog/2005/10/add-event/
The advantage is 1. Can work in all browsers;
2.this points to the current element;
3. A combination of all browsers to prevent default behavior and prevent event bubbling of the function
The downside is that you work only in the bubbling phase
function addevent (element, type, handler) {
Assign each event handler a unique ID
if (!handler.$ $guid) handler.$ $guid = addevent.guid++;
Create a hash table of event types for the element
if (!element.events) element.events = {};
Create a hash table of event handlers for each element/event pair
var handlers = Element.events[type];
if (!handlers) {
Handlers = Element.events[type] = {};
Store the existing event handler (if there is one)
if (element["on" + type]) {
Handlers[0] = element["on" + type];
}
}
Store the event handler in the hash table
handlers[handler.$ $guid] = handler;
Assign a global event handler to does all the work
Element["on" + type] = Handleevent;
};
A counter used to create unique IDs
Addevent.guid = 1;
function removeevent (element, type, handler) {
Delete the event handler from the hash table
if (element.events && Element.events[type]) {
Delete element.events[type][handler.$ $guid];
}
};
function Handleevent (event) {
var returnvalue = true;
Grab the Event object (IE uses a global event object)
Event = Event | | Fixevent (window.event);
Get a reference to the hash table of event handlers
var handlers = This.events[event.type];
Execute each event handler
for (var i in handlers) {
this.$ $handleEvent = handlers[i];
if (this.$ $handleEvent (event) = = False) {
ReturnValue = false;
}
}
Return returnvalue;
};
function Fixevent (event) {
Add Consortium standard Event methods
Event.preventdefault = Fixevent.preventdefault;
Event.stoppropagation = fixevent.stoppropagation;
return event;
};
Fixevent.preventdefault = function () {
This.returnvalue = false;
};
Fixevent.stoppropagation = function () {
This.cancelbubble = true;
};

There is also an estimate to be written by several foreign masters to achieve the same function.

Copy Code code as follows:

/*
* (c) 2006 Jesse Skinner/dean Edwards/matthias Miller/john resig
* Special to Dan Webb ' s domready.js Prototype extension
* and Simon Willison ' s addloadevent
*
* For more info, the following:
* Http://www.thefutureoftheweb.com/blog/adddomloadevent
* http://dean.edwards.name/weblog/2006/06/again/
* Http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* Http://simon.incutio.com/archive/2004/05/26/addLoadEvent
*
*
* to Use:call adddomloadevent one or more times with functions, ie:
*
* Function something () {
*//do something
*    }
* Adddomloadevent (something);
*
* Adddomloadevent (function () {
*//do other stuff
*    });
*
*/

Adddomloadevent = (function () {
Create Event function stack
var load_events = [],
Load_timer,
Script
Done
Exec
Old_onload,
init = function () {
Done = true;
Kill the Timer
Clearinterval (Load_timer);
Execute each function in the stack in the order they were added
while (exec = Load_events.shift ())
exec ();
if (script) Script.onreadystatechange = ';
};
return function (func) {
If the init function is already ran, the just run this function is now and stop
if (done) return func ();
if (!load_events[0]) {
For MOZILLA/OPERA9
if (Document.addeventlistener)
Document.addeventlistener ("domcontentloaded", init, false);
For Internet Explorer
/* @cc_on @*/
/* @if (@_win32)
document.write ("<script id=__ie_onload defer src=//0><\/scr" + "ipt>");
Script = document.getElementById ("__ie_onload");
Script.onreadystatechange = function () {
if (this.readystate = = "complete")
Init (); Call the onload handler
};
/* @end @*/
For Safari
if (/webkit/i.test (navigator.useragent)) {//sniff
Load_timer = setinterval (function () {
if (/loaded|complete/.test (document.readystate))
Init (); Call the onload handler
}, 10);
}
For the other browsers set the Window.onload, but also execute the old window.onload
Old_onload = window.onload;
Window.onload = function () {
Init ();
if (old_onload) old_onload ();
};
}
Load_events.push (func);
}
})();