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 iframe编程相关代码
Dec 28 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
使用AOP改善javascript代码
May 01 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
Node.Js中实现端口重用原理详解
May 03 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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/02/19 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python学习笔记_数据排序方法
2014/05/22 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python itertools模块详解
2015/05/09 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
职工运动会邀请函
2014/01/19 职场文书
优良学风班申请材料
2014/02/13 职场文书
仓管员岗位责任制
2014/02/19 职场文书
旅游安全协议书
2014/04/21 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
师范生见习报告
2014/10/31 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技