杂记-03.判断页面ready

1. window.onload

window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发.

下面有两版ready实现

代码1.0问世，代码如下：

var $ = ready = window.ready = function(fn){  
     if(document.addEventListener){//兼容非IE  
         document.addEventListener("DOMContentLoaded",function(){  
             //注销事件，避免反复触发  
             document.removeEventListener("DOMContentLoaded",arguments.callee,false);  
             fn();//调用参数函数  
         },false);  
     }else if(document.attachEvent){//兼容IE  
         document.onreadystatechange = function() {
             if (document.readyState == 'complete') {
                 document.onreadystatechange = null;
                 document.attachEvent("onreadystatechange",function(){
                     document.detachEvent("onreadystatechange",arguments.callee);
                     fn();//调用参数函数  
                 });  
             }
         };
     }  
 }

使用方法

ready(function(){
    alert(1);
});

1.0是有问题的，对于不蛋疼的浏览器自然没有事，可是遇到IE，大家要淡定。IE9完好没有问题，可是IE6/7/8，就恶心了。

你们测试的时候最好页面里装一张巨大的图片，每次都要强刷，你会发现IE6/7/8上我们写的ready和onload没有设那么两样！可能还会比onload还要慢！fuck！其实这个是onreadystatechange的问题，你要想让他管用你页面就别方图了,大家是不是脸上一条黑线飘过，哎！我昨天买了块表阿！

于是翻了篇大大的播客解决问题办法来了。

代码2.0问世，代码��下：

var $ = ready = window.ready = function(fn){  
    if(document.addEventListener){//兼容非IE  
        document.addEventListener("DOMContentLoaded",function(){  
            //注销事件，避免反复触发  
            document.removeEventListener("DOMContentLoaded",arguments.callee,false);  
            fn();//调用参数函数  
        },false);  
    }else if(document.attachEvent){//兼容IE  
       IEContentLoaded (window, fn);
    }  

    function IEContentLoaded (w, fn) {
        var d = w.document, done = false,
        // only fire once
        init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };
        // polling for no errors
        (function () {
            try {
                // throws errors until after ondocumentready
                d.documentElement.doScroll('left');
            } catch (e) {
                setTimeout(arguments.callee, 50);
                return;
            }
            // no errors, fire

            init();
        })();
        // trying to always fire before onload
        d.onreadystatechange = function() {
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        };
    }
}

使用方法

ready(function(){
  alert(1)
})

你们测试的时候最好页面里装一张巨大的图片，然后再试试问题解决了。IE那块IEcontentloaded代码原理也不难看懂，一国外牛人所写，好似jquery也正在使用。

这篇随笔也是边学边写，大家共同进步吧！

讨论地址： 记录学习中遇到的问题，记录成长