javaScript domready及兼容处理

window.onload与domready的区别?

window.onload是所有dom元素创建完毕,图片、css等都加在完毕后才触发,而domready则是dom元素创建完毕后就被触发。提高了网页的响应速度。

封装一个domready:

function domReady(fn){
    if(document.addEventListener){
        document.addEventListener('DOMContentLoaded',function(){
            fn&&fn();//处理事情
        },false);
    }else{
        /*监控资源情况,ie8及以下不支持addEventListener*/
        document.onreadystatechange=function(){
            /*dom加载完成的时候*/
            if(document.readyState=='complete'){
                fn&&fn();//处理事情
            }
        };
    }
}

addEventListener事件绑定(ie8及以下使用attachEvent),DOMContentLoaded必须事件绑定。

/*具体使用*/
domReady(function(){
            var oDiv=document.getElementById('div1');
            oDiv.onclick=function(){
                ......
            };
 });

你可能感兴趣的:(javaScript domready及兼容处理)