老师,你好这个引入的domReady.js的源码能解释下实现原理吗?谢谢

来源:6-6 高效创建节点的方法(innerHTML-outerHTML)

weibo_执著的弧线_0

2019-06-02 22:50:41

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


写回答

1回答

好帮手慕码

2019-06-03

同学你好!

domReady.js文件中,监听的是DOMContentLoaded事件,中心思想就是:DOM加载完之后就会触发这个事件,不需要等待图片和其他资源加载完毕。

http://img.mukewang.com/climg/5cf491820001e30309540266.jpg

因为现在还没有学习到jQuery , 所以这里是老师为了方便课程讲解自己封装了一个类似的方法 . 这里同学对 domReady.js简单了解一下即可 ,不需要学习。后期学了jQuery,使用$(document).ready(function(){}) 就可以啦 .

如果帮助到了你 欢迎采纳 祝学习愉快~

0

0 学习 · 40143 问题

查看课程