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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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中上传大体积文件时需要的设置
2006/10/09 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python表示矩阵的方法分析
2017/05/26 Python
Python中property函数用法实例分析
2018/06/04 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
Python实现天气查询软件
2021/06/07 Python
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android