dom加载完的判断

dom加载完的判断

 

 

window.onload事件可以安全的执行javascript，因为该事件是在页面完全加载完后才开始执行（包括页面内的图片、flash等所有元素），不会因为JS需要对某个DOM 操作，而页面还没有加载该节点而引起错误。但是这种安全是需要付出代价的：如果某些图片（或者一些别的东西）加载特别慢，那么load事件会等到很久之后才会触发。针对这个问题，一些JS框架提供了一些补充方法。如：jquery的$(document).ready()、mootools的domready事件。都是在页面的DOM加载完毕后立即执行，而不需要等待漫长的图片下载过程。如果不使用这些框架，可以使用这个独立的DomReady.js

 

小巧独立的Javascript库:DomReady.js

 

Js代码  

(function(){  

 

    var DomReady = window.DomReady = {};  

 

    // Everything that has to do with properly supporting our document ready event. Brought over from the most awesome jQuery.   

 

    var userAgent = navigator.userAgent.toLowerCase();  

 

    // Figure out what browser is being used  

    var browser = {  

        version: (userAgent.match( /.+(?:rv|it|ra|ie)[//: ]([/d.]+)/ ) || [])[1],  

        safari: /webkit/.test(userAgent),  

        opera: /opera/.test(userAgent),  

        msie: (/msie/.test(userAgent)) && (!/opera/.test( userAgent )),  

        mozilla: (/mozilla/.test(userAgent)) && (!/(compatible|webkit)/.test(userAgent))  

    };      

 

    var readyBound = false;   

    var isReady = false;  

    var readyList = [];  

 

    // Handle when the DOM is ready  

    function domReady() {  

        // Make sure that the DOM is not already loaded  

        if(!isReady) {  

            // Remember that the DOM is ready  

            isReady = true;  

 

            if(readyList) {  

                for(var fn = 0; fn < readyList.length; fn++) {  

                    readyList[fn].call(window, []);  

                }  

 

                readyList = [];  

            }  

        }  

    };  

 

    // From Simon Willison. A safe way to fire onload w/o screwing up everyone else.  

    function addLoadEvent(func) {  

      var oldonload = window.onload;  

      if (typeof window.onload != 'function') {  

        window.onload = func;  

      } else {  

        window.onload = function() {  

          if (oldonload) {  

            oldonload();  

          }  

          func();  

        }  

      }  

    };  

 

    // does the heavy work of working through the browsers idiosyncracies (let's call them that) to hook onload.  

    function bindReady() {  

        if(readyBound) {  

            return;  

        }  

 

        readyBound = true;  

 

        // Mozilla, Opera (see further below for it) and webkit nightlies currently support this event  

        if (document.addEventListener && !browser.opera) {  

            // Use the handy event callback  

            document.addEventListener("DOMContentLoaded", domReady, false);  

        }  

 

        // If IE is used and is not in a frame  

        // Continually check to see if the document is ready  

        if (browser.msie && window == top) (function(){  

            if (isReady) return;  

            try {  

                // If IE is used, use the trick by Diego Perini  

                // http://javascript.nwbox.com/IEContentLoaded/  

                document.documentElement.doScroll("left");  

            } catch(error) {  

                setTimeout(arguments.callee, 0);  

                return;  

            }  

            // and execute any waiting functions  

            domReady();  

        })();  

 

        if(browser.opera) {  

            document.addEventListener( "DOMContentLoaded", function () {  

                if (isReady) return;  

                for (var i = 0; i < document.styleSheets.length; i++)  

                    if (document.styleSheets[i].disabled) {  

                        setTimeout( arguments.callee, 0 );  

                        return;  

                    }  

                // and execute any waiting functions  

                domReady();  

            }, false);  

        }  

 

        if(browser.safari) {  

            var numStyles;  

            (function(){  

                if (isReady) return;  

                if (document.readyState != "loaded" && document.readyState != "complete") {  

                    setTimeout( arguments.callee, 0 );  

                    return;  

                }  

                if (numStyles === undefined) {  

                    var links = document.getElementsByTagName("link");  

                    for (var i=0; i < links.length; i++) {  

                        if(links[i].getAttribute('rel') == 'stylesheet') {  

                            numStyles++;  

                        }  

                    }  

                    var styles = document.getElementsByTagName("style");  

                    numStyles += styles.length;  

                }  

                if (document.styleSheets.length != numStyles) {  

                    setTimeout( arguments.callee, 0 );  

                    return;  

                }  

 

                // and execute any waiting functions  

                domReady();  

            })();  

        }  

 

        // A fallback to window.onload, that will always work  

        addLoadEvent(domReady);  

    };  

 

    // This is the public function that people can use to hook up ready.  

    DomReady.ready = function(fn, args) {  

        // Attach the listeners  

        bindReady();  

 

        // If the DOM is already ready  

        if (isReady) {  

            // Execute the function immediately  

            fn.call(window, []);  

        } else {  

            // Add the function to the wait list  

            readyList.push( function() { return fn.call(window, []); } );  

        }  

    };  

 

    bindReady();  

 

})();  

 

使用方法：

Html代码  

<html lang="en">   

<head>   

    <script src="domready.js" type="application/javascript"></script>   

    <script type="application/javascript">   

        DomReady.ready(function() {   

            alert('dom is ready');   

        });   

    </script>   

</head>   

<body>   

</body>   

</html>   

 

 

 

     jquery里有专门解决DOM加载的函数$(document).ready()（简写就是$(fn)），非常好用！