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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
koa router 多文件引入的方法示例
May 22 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
一次编写,随处运行
2006/10/09 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
python字典的值可以修改吗
2020/06/29 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
英语专业毕业生自荐信范文
2013/12/31 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
经典促销广告词大全
2014/03/19 职场文书
婚前保证书
2014/04/29 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
教育见习报告范文
2014/11/03 职场文书
顶岗实习协议书
2015/01/29 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书