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 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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生成压缩文件实例
2015/02/07 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
仿百度输入框智能提示的js代码
2013/08/22 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
5种Python单例模式的实现方式
2016/01/14 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
什么是makefile? 如何编写makefile?
2013/01/02 面试题
充分就业社区汇报材料
2014/05/07 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
新课程改革心得体会
2016/01/22 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
Node与Python 双向通信的实现代码
2021/07/16 Javascript