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 闭包在封装函数时的简单分析
Nov 28 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
vue 如何使用递归组件
Oct 23 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 mail to 配置详解
2014/01/16 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python之wxPython应用实例
2014/09/28 Python
python实现红包裂变算法
2016/02/16 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python timeit模块的使用实践
2020/01/13 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
python 如何停止一个死循环的线程
2020/11/24 Python
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
天网面试题
2013/04/07 面试题
农救科工作职责
2013/11/27 职场文书
银行领导证婚词
2014/01/11 职场文书
单位人事专员介绍信
2014/01/11 职场文书
师德师风个人反思
2014/04/28 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
运动与健康自我评价
2015/03/09 职场文书
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js