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代码
May 09 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
jquery validate demo 基础
Oct 29 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
封装Vue Element的table表格组件的示例详解
Aug 19 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
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
js常用DOM方法详解
2017/02/04 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
中专毕业生自荐信
2013/11/16 职场文书
大学生自我鉴定书
2014/03/24 职场文书
商业融资计划书
2014/04/29 职场文书
趣味运动会策划方案
2014/06/02 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript