jQuery ready函数滥用分析


Posted in Javascript onFebruary 16, 2011

查看下之前写的代码,有许多这样的代码:

$(function(){ 
//do something. 
});

这里面可能写一些初始化样式、给其他dom元素附加事件处理等。刚开始没发现什么问题,但是在页面引用了一些下载缓慢的图片时,问题出现了:在页面html下载完,到所有资源全部下载完之间,绑定dom元素上绑定的事件无法执行、用脚本绑定的样式无效等混乱情况,也就是ready么有执行。

Ok,我的情况比较特殊,可能这个情况对于大部分同学是不可能遇到的,但是在开发中我们不得不考虑在某种比较糟糕的情况下,某个用户打开了你的网站,然后正好你的页面上有许多图片。。。那他只能等着了吧。。。

解决办法: 返璞归真
在ready出现之前我们的写法可能是这样的:

在文档中插入一段脚本块

<span id="test1">hello world</span> 
<script type="text/javascript"> 
alert(document.getElementById("test1").innerHTML); 
</script>

这样的代码在浏览器加载到这里时就会执行。注意,如果在这里的DOM元素test1在script块后面,这里就会出现异常。

我只是需要在页面加载时候就执行这些代码,不需要页面所有资源都加载完,所以,没必要让我坐在这等着"缓慢"的ready吧。

嗯,思考一下,整理下html结构
页面中到处都是这个script块也不好,不利于阅读,那就把他们整理一块拉到文档结尾吧。

<html> 
<head> 
//让这里就放一些title、meta、link之类的神马东西吧。 
</head> 
<body> 
Body html……. 
<script type="text/javascript"> 
alert("把你的代码从head拉到这里来吧。。。放心的操作文档,不用担心找不到元素,也不用window.onLoad、$.ready神马的了"); 
</body> 
</html>

Ok,如果您确实需要等着资源文件下载完才能执行脚本,那您还是老老实实的用jQuery的ready吧。
Javascript 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 #Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 #Javascript
JQuery 选择器、过滤器介绍
Feb 14 #Javascript
AJAX分页的代码(后台asp.net)
Feb 14 #Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 #Javascript
jquery isType() 类型判断代码
Feb 14 #Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 #Javascript
You might like
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
Javascript的this用法
2017/01/16 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
浅述python2与python3的简单区别
2018/09/19 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
党员批评与自我批评
2014/02/12 职场文书
网站推广策划方案
2014/06/04 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
挂靠协议书
2015/01/27 职场文书
食品药品安全责任书
2015/05/11 职场文书
最美乡村教师观后感
2015/06/11 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang