解决window.onload延迟加载问题

window.onload方法，表示当页面所有的元素都加载完毕，并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题，但是当页面中有大量远程图片或要请求的远程资源时，我们需要让js在点击每张图片时，进行相应的操作，如果此时外部资源还没有加载完毕，点击图片是不会有任何反应的，大大降低了用户体验。那既然window.onload方法不可行，又该怎么做呢？

你肯定想到了jquery中的$(document).ready(function(){})方法了,其实jquery中的domReady应该和window.onload的实现原理是大同小异的。为了解决window.onload的短板，w3c 新增了一个 DOMContentLoaded 事件。

（1）onload实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            document.getElementById("header").style.color="red";
        }
    </script>
</head>
<body>
    <h1 id="header">我是H1</h1>
    <img src="1.jpg" alt="">
    <img src="1.jpg" alt="">
    <img src="1.jpg" alt="">
    <!-- 如果大量图片的时候onload需要等待全部加载完成才能将h1标签给渲染成红色 -->
</body>
</html>

（2）Jquery解决以上问题

$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM包括图片载入就绪时就对其进行操纵，并调用执行绑定的函数。

tip：jquery就是调用了原生JS事件DOMContentLoaded 来实现相同功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            document.getElementById("header").style.color="red";
        })
    </script>
</head>
<body>
    <h1 id="header">我是H1</h1>
    <img src="1.jpg" alt="">
    <img src="1.jpg" alt="">
    <img src="1.jpg" alt="">
    <!-- 假设大量远程图片正在加载 -->
</body>
</html>

（3）原生JS事件DOMContentLoaded实现

参考jquery中domReady的实现原理，来看一下javascript中domReady的实现策略。

JavaScript实现domReady功能，【domReady.js】兼容各浏览器通用版本的源代码：

function myReady(fn){  
    //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式  
    if ( document.addEventListener ) {  
        document.addEventListener("DOMContentLoaded", fn, false);  
    } else {  
        IEContentLoaded(fn);  
    }  
    //IE模拟DOMContentLoaded  
    function IEContentLoaded (fn) {  
        var d = window.document;  
        var done = false;  
  
        //只执行一次用户的回调函数init()  
        var init = function () {  
            if (!done) {  
                done = true;  
                fn();  
            }  
        };  
        (function () {  
            try {  
                // DOM树未创建完之前调用doScroll会抛出错误  
                d.documentElement.doScroll('left');  
            } catch (e) {  
                //延迟再试一次~  
                setTimeout(arguments.callee, 50);  
                return;  
            }  
            // 没有错误就表示DOM树创建完毕，然后立马执行用户回调  
            init();  
        })();  
        //监听document的加载状态  
        d.onreadystatechange = function() {  
            // 如果用户是在domReady之后绑定的函数，就立马执行  
            if (d.readyState == 'complete') {  
                d.onreadystatechange = null;  
                init();  
            }  
        }  
    }  
}

粘贴上面代码到新js文件保存。在页面中引入domReady.js文件，引用myReady(回调函数)方法即可。

用原生JS实现跟Jquery的ready相同功能效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="domReady.js"></script>  <!--引用domReady功能 -->
    <script>
        myReady(function(){
            document.getElementById("header").style.color="red";
        })
    </script>
</head>
<body>
    <h1 id="header">我是H1</h1>
    <img src="1.jpg" alt="">
    <img src="1.jpg" alt="">
    <img src="1.jpg" alt="">
    <!-- 假设大量远程图片正在加载 -->
</body>
</html>

很明显，onload事件是要在所有请求都完成之后才执行，而domReady利用hack技术，在加载完dom树之后就能执行，所以domReady比onload执行时间更早，建议采用domReady。

（4）domReady与window.onload延迟差距测试

下面通过一个案例，来比较domReady与window.onload实现的不同，很明显，onload事件是要在所有请求都完成之后才执行，而domReady利用hack技术，在加载完dom树之后就能执行，所以domReady比onload执行时间更早，建议采用domReady。

    <!DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <title>domReady与window.onload</title>
        <script src="domReady.js"></script>
    </head>

    <body>
        <div id="showMsg"></div>
        <div>
            <img src="http://ww1.sinaimg.cn/large/ae49ba57gy1fe9zofelhdj20xc0xc42s.jpg" alt="">
            <img src="http://ww1.sinaimg.cn/large/ae49ba57gy1fe9zofahw3j20m80etq4a.jpg" alt="">
            <img src="http://ww1.sinaimg.cn/large/ae49ba57gy1fe9zoi3ny6j20l20dw4gd.jpg" alt="">
            <img src="http://ww1.sinaimg.cn/large/ae49ba57gy1fe9zog3tauj20m80et0uw.jpg" alt="">
            <img src="http://ww1.sinaimg.cn/large/ae49ba57gy1fe9zofi2o5j20m80ettaq.jpg" alt="">
            <img src="http://ww1.sinaimg.cn/large/ae49ba57gy1fe9zohjuvhj20tb0cdwvp.jpg" alt="">
        </div>
        <script>
        var d = document;
        var msgBox = d.getElementById("showMsg");
        var imgs = d.getElementsByTagName("img");
        var time1 = null,
            time2 = null;
        myReady(function() {
            msgBox.innerHTML += "dom已加载！<br>";
            time1 = new Date().getTime();
            msgBox.innerHTML += "时间戳：" + time1 + "<br>";
        });
        window.onload = function() {
            msgBox.innerHTML += "onload已加载！<br>";
            time2 = new Date().getTime();
            msgBox.innerHTML += "时间戳：" + time2 + "<br>";
            msgBox.innerHTML += "domReady比onload快：" + (time2 - time1) + "ms<br>";
        };
        </script>
    </body>

    </html>

执行结果对比，发现DomReady比onload快乐2秒左右。