Dom加载让图片加载完再执行的脚本代码

现在，我们来研究一下如何解决这个问题，解决方法就是在DOM加载完毕之后就执行程序。 

       先介绍两个人。一，jquery的作者：John Resig；二，javascript的世界级大师：dean edwards。（大家要记住这两位天才！） 

      jquery里有专门解决DOM加载的函数$(document).ready()（简写就是$(fn)），非常好用！John Resig在《Pro JavaScript Techniques》里，有这样一个方法处理DOM加载，原理就是通过document&& document.getElementsByTagName &&document.getElementById&& document.body 去判断Dom树是否加载完毕。代码如下：

function domReady( f ) { 
// 如果DOM加载完毕，马上执行函数 
if ( domReady.done ) return f();    
// 假如我们已增加一个函数 
if ( domReady.timer ) {  
// 把它加入待执行的函数清单中 
domReady.ready.push( f );  
} else {  
// 为页面加载完成绑定一个事件,  
// 为防止它最先完成. 使用 addEvent（下面列出）. 
addEvent( window, “load”, isDOMReady );    
// 初始化待执行的函数的数组 
domReady.ready = [ f ];    
// 经可能快地检查Dom是否已可用 
domReady.timer = setInterval( isDOMReady, 13 );  
}  
}   
// 检查Dom是否已可操作 
function isDOMReady() {  
// 假如已检查出Dom已可用, 忽略  
if ( domReady.done ) return false;    
// 检查若干函数和元素是否可用 
if ( document &&  document.getElementsByTagName &&  document.getElementById &&  document.body ) {    
// 假如可用, 停止检查 
clearInterval( domReady.timer );  
domReady.timer = null;    
// 执行所有等待的函数 
for ( var i = 0; i < domReady.ready.length; i++ )  
domReady.ready[i]();    
// 记录在此已经完成 
domReady.ready = null;  
domReady.done = true;  
}  
} 
// 由 Dean Edwards 在2005 所编写addEvent/removeEvent, 
// 由 Tino Zijdel整理 
// http://dean.edwards.name/weblog/2005/10/add-event/ 
//优点是1.可以在所有浏览器工作； 
//2.this指向当前元素； 
//3.综合了所有浏览器防止默认行为和阻止事件冒泡的的函数 
//缺点就是仅在冒泡阶段工作 
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; 
};

还有一个估计由几个外国大师合作写的，实现同样功能。

/* 
* (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("<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 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); 
    } 
})();