DOM Ready之 document.ready和onload的区别

最新推荐文章于 2020-09-12 08:39:28 发布

原创最新推荐文章于 2020-09-12 08:39:28 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #浏览器 #ready #onload #javascript

前端开发专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了document.ready和onload的区别，重点在于它们在页面加载过程中的不同作用，并提供了兼容不同浏览器的封装代码，旨在提升用户体验。

先了解一下，document.ready和onload之间的区别：

ready: 表示文档结构已经加载完成（不包含图片等非文字媒体文件）;
onload:表示页面包含图片等文件在内的所有元素都加载完成。

对于浏览器解析过程了解的同学都可能知道，浏览器是通过：域名解析-加载html（由上到下加载）-加载js和css-加载图片等其他信息，有时候因业务须求，我们通常是在要没有加载完图片，由其是一些大高清图片时，当DOM树加载完，还未加载完图片等信息时，去绑定事件时，就会用到ready，而非document.onload事件去绑定。
这样做的好处是增加了用户的体验。

为了兼容一些低版本的浏览器，我们对代码进行了封装处理，代码如下：

封装后的document.ready源码

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();
            }
        }
    }
}

在调用时：

myReady(function(){
    //代码逻辑
    ....
});