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(){
                ......
            };
 });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西...
    微醺岁月阅读 4,533评论 2 61
  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 794评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 事件处理程序在应用中是必不可少的,虽然现在很多框架都有自己实现事件处理方法,但是熟知原生才能让我们应对各种各样的需...
    俗三疯阅读 310评论 0 1
  • Google Maps Pulls Calorie-Counting Feature after Criticis...
    新心断点阅读 588评论 0 0