美文网首页
javaScript domready及兼容处理

javaScript domready及兼容处理

作者: 尤樊容 | 来源:发表于2017-01-23 20:38 被阅读40次
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及兼容处理

    window.onload与domready的区别? window.onload是所有dom元素创建完毕,图片、c...

  • JavaScript — event介绍以及兼容处理

    JavaScript — event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape...

  • jQuery基础

    jQuery基础 一、jQuery简介 是一款JavaScript库方便地处理HTML、事件、动画等 可以兼容多浏...

  • jQuery

    jQuery 能做什么? jQuery将JavaScript的代码进行了封装,处理了兼容性问题,提供API进行调用...

  • jQuery

    jQuery 能做什么? jQuery将JavaScript的代码进行了封装,处理了兼容性问题,提供API进行调用...

  • domReady

    当DOM整个结构加载完成执行什么。。

  • jQuery基础:样式

    什么是jQuery? 轻量级的Javascript库 核心是Javascript 不仅兼容了css3,还兼容各种浏...

  • jQuery的选择艺术

    什么是jQuery 是一款JavaScript库 方便的处理HTML,事件,动画等 可以兼容多浏览器 jQuery...

  • 简述domready和onload事件的区别

    题目:简述domready和onload事件的区别?图片的onload和domready和页面onload的先后顺...

  • JavaScript基础知识总结(一)

    JavaScript - JavaScript兼容于ECMA标准,因此也称为ECMAScript。 调试...

网友评论

      本文标题:javaScript domready及兼容处理

      本文链接:https://www.haomeiwen.com/subject/tcgabttx.html