[javascript]如何 VS jQuyer ready

浏览数：18 / 时间：2015年06月08日

我们常做的，页面加载完毕我们要做一些事情常用到的有以下几种方式。

1. jQuery.ready

jQuery 基本每一个搞前端的童鞋都会使用了 , 这个确实给我们带来极多的便利。 jQuery ready 触发是在DOM加载完毕即触发。比window.onload优先。

附图：jQuery版本大小（好多童鞋都认为jQuery加载到页面上有点偏大）

2. window.onload

之前我最经常使用的方法。这个特点就是需要等待页面元素加载完毕才能触发。正常情况下，和jQuery没太多的时差。但是如果页面上有大量的图片或者有iframe的话，window.onload 将成为你的灾难。。

3. 执行方法放到页面最下方的script里面

如果遇到《2》中描述的形式。这确实是一种好的解决方法，且该方法的优先于jQuery.ready 。

4. 分离出来的jQuery.ready

这个是我之前从一位童鞋那抄来的。忘记是哪位童鞋了，如果这位童鞋看见请留言，我补上您的大名哈。

 (function () {
            var isReady = false; //判断onDOMReady方法是否已经被执行过
            var readyList = [];//把需要执行的方法先暂存在这个数组里
            var timer;//定时器句柄
            ready = function (fn) {
                if (isReady)
                    fn.call(document);
                else
                    readyList.push(function () { return fn.call(this); });
                return this;
            }
            var onDOMReady = function () {
                for (var i = 0; i < readyList.length; i++) {
                    readyList[i].apply(document);
                }
                readyList = null;
            }
            var bindReady = function (evt) {
                if (isReady) return;
                isReady = true;
                onDOMReady.call(window);
                if (document.removeEventListener) {
                    document.removeEventListener("DOMContentLoaded", bindReady, false);
                } else if (document.attachEvent) {
                    document.detachEvent("onreadystatechange", bindReady);
                    if (window == window.top) {
                        clearInterval(timer);
                        timer = null;
                    }
                }
            };
            if (document.addEventListener) {
                document.addEventListener("DOMContentLoaded", bindReady, false);
            } else if (document.attachEvent) {
                document.attachEvent("onreadystatechange", function () {
                    if ((/loaded|complete/).test(document.readyState))
                        bindReady();
                });
                if (window == window.top) {
                    timer = setInterval(function () {
                        try {
                            isReady || document.documentElement.doScroll(‘left‘);//在IE下用能否执行doScroll判断dom是否加载完毕
                        } catch (e) {
                            return;
                        }
                        bindReady();
                    }, 5);
                }
            }
        })();