[javascript]如何 VS jQuyer ready

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

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

                }

            }

        })();

 

 5. 演示代码

：“小子废话一堆，不知所云，你是标题党吧” 。

客官继续看↓

示例代码

查看代码输出不难看出：《3》方法明显更优先。

--- 执行到最下方及加载完毕，尝试输出：d1 vs_jqrvs.jquery.ready.html:76

--- JQ load 页面加载完毕 vs_jqrvs.jquery.ready.html:76

--- JQ 剥离版本 页面加载完毕 vs_jqrvs.jquery.ready.html:76

--- img load 加载完毕 vs_jqrvs.jquery.ready.html:76

--- iframe load 加载完毕 vs_jqrvs.jquery.ready.html:76

--- window load 页面加载完毕

 

 

大家有啥更好的方式一起聊聊！！！