首页 > 代码库 > [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》方法明显更优先。
大家有啥更好的方式一起聊聊!!!
[javascript]如何 VS jQuyer ready
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。