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添加重载函数的辅助方法
Jul 04 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
node使用async_hooks模块进行请求追踪
Jan 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 移除数组重复元素的一点说明
2008/11/27 PHP
php类常量的使用详解
2013/06/08 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
php数组查找函数总结
2014/11/18 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python3.6简单操作Mysql数据库
2017/09/12 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python延时操作实现方法示例
2018/08/14 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Python中包的用法及安装
2020/02/11 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
员工工作表扬信范文
2014/01/13 职场文书
采购助理岗位职责
2014/02/16 职场文书
新文化运动的基本口号
2014/06/21 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL