首页 > 代码库 > [javascript]如何 VS jQuyer ready

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

 

 

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

 

[javascript]如何 VS jQuyer ready