myReady的写法

同学你好，如下，就是这个文件中的代码，有添加注释，同学可以参考下。

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、当把js代码放在head中，代码顺序执行，当页面在浏览器中打开时，会先执行js代码，再执行body里面的dom结构。如果js执行时要获取body中的元素，那么就会报错，因为页面的结构还没有加载进来。所以老师为了解决这个问题，写了一个方法：

在domReady.js中， 老师封装了一个myReady方法 , 这个方法实现的效果就是$(document).ready(function(){}) , 让DOM加载完后再去执行js代码 。因为现在还没有学习到jQuery , 所以这里老师为了方便课程讲解自己封装了一个类似的方法，里面涉及了很多高级阶段才学的内容 。同学对 domReady.js简单了解一下即可，不需要深入研究，先用老师的写好的就行。后期学了jQuery，使用$(document).ready(function(){}) 就可以啦 。

2、和window.onload加载事件有些类似，但是window.onload事件加载的更全面一些，包括dom结构，图片以及其他资源等。而封装这个只是DOM加载完之后就会触发这个事件，不需要等待图片和其他资源加载完毕。

如果我的回答帮助了你，欢迎采纳，祝学习愉快！