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语法和定时函数
May 03 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
vue如何在自定义组件中使用v-model
May 14 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
js实现一个简易计算器
Mar 30 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 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
制作美丽的拉花
2021/03/03 冲泡冲煮
PHP下几种删除目录的方法总结
2007/08/19 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
Python中的getopt函数使用详解
2015/07/28 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
颁奖典礼主持词
2014/03/25 职场文书
工作建议书范文
2014/05/13 职场文书
中华魂演讲稿
2014/05/13 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers