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 相关文章推荐
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 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/04 咖啡文化
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
php以post形式发送xml的方法
2014/11/04 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
bootstrap table实例详解
2017/01/06 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python列表的增删改查实例代码
2018/01/30 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
原生python实现knn分类算法
2019/10/24 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
python 线程的五个状态
2020/09/22 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
幼师自荐信范文
2013/10/06 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
python tkinter模块的简单使用
2021/04/07 Python