[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 页面加载完毕

 

 

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