Script code for loading images after Dom loading _ javascript skills

When you use window. onload to execute a function, you must wait until all the images and other information on the page are loaded. However, in many cases, the number of images is large, so it takes a lot of time to download images. What's even more embarrassing is that when the webpage document (or Dom) has been loaded and the image has not been loaded, many users have begun to browse the webpage, but many of them are created by windows. the function triggered by onload cannot be executed, which leads to the failure of some functions to be used perfectly. What's more serious is that it will leave a bad impression on users! Now, let's take a look at how to solve this problem. The solution is to execute the program after the DOM is loaded.

First, we will introduce two people. I. Author of jquery: John Resig; II. World-class master of javascript: dean edwards. (Remember these two geniuses !)

Jquery has a function $ (document). ready () (abbreviated as $ (fn) for DOM loading, which is very useful! John Resig, in "Pro JavaScript Techniques", has such a method to handle DOM loading by using document & document. getElementsByTagName & document. getElementById & document. body to determine whether the Dom tree has been loaded. The Code is as follows:

The Code is as follows:

Function domReady (f ){
// If the DOM is loaded, execute the function immediately.
If (domReady. done) return f ();
// Suppose 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 loading,
// To prevent it from being completed first, use addEvent (listed below ).
AddEvent (window, "load", isDOMReady );
// Initialize the array of functions to be executed
DomReady. ready = [f];
// Check whether the Dom is available quickly.
DomReady. timer = setInterval (isDOMReady, 13 );
}
}
// Check whether the Dom is operable
Function isDOMReady (){
// If the Dom has been checked out, ignore
If (domReady. done) return false;
// Check whether several functions and elements are available
If (document & document. getElementsByTagName & document. getElementById & document. body ){
// If available, stop the check
ClearInterval (domReady. timer );
DomReady. timer = null;
// Execute all the waiting Functions
For (var I = 0; I <domReady. ready. length; I ++)
DomReady. ready [I] ();
// Record completed here
DomReady. ready = null;
DomReady. done = true;
}
}
// AddEvent/removeEvent compiled by Dean Edwards in 2005,
// Organized by Tino Zijdel
// Http://dean.edwards.name/weblog/2005/10/add-event/
// Advantage: 1. It can work in all browsers;
// 2. this points to the current element;
// 3. integrates all browsers to prevent default behaviors and prevent event bubbles.
// The disadvantage is that it only works in the bubble stage.
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 do 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 W3C 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;
};

Another estimate was written by several foreign masters to implement the same function.

The Code is as follows:

/*
* (C) 2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
* Special thanks to Dan Webb's domready. js Prototype extension
* And Simon Willison's addLoadEvent
*
* For more info, see:
* 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 was already ran, just run this function 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 ("