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 验证上传图片大小[客户端]
Aug 01 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
关于element的表单组件整理笔记
Feb 05 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 无限极分类
2008/03/27 PHP
php的ajax简单实例
2014/02/27 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
深入探究Django中的Session与Cookie
2017/07/30 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python猴子补丁知识点总结
2020/01/05 Python
基于Pytorch SSD模型分析
2020/02/18 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
建筑施工员岗位职责
2013/11/26 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS