页面加载 js

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

 使用这种方式js执行的顺序会在jsp页面中有类似下面的js执行的后面执行：

$(function(){
<%@ include file="../../js/order/rule_zadd.js"%>
});

 但是会在window.onload之前执行。