jQuery ready函数滥用分析

查看下之前写的代码，有许多这样的代码：


代码如下:

$(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吧。

赞 (0)

相关推荐

  • jquery中的$(document).ready()使用小结

    window.onload = function(){ alert("welcome"); }这样的写法作用是希望在页面加载完,自动执行定义js代码(function). $(document).ready(function(){.... })这个函数是用来取代页面中的window.onload; document.ready()和传统的方法<body onload="load()"> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括

  • JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r

  • Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作. 比如jquery写法:$("div p"); // (1)$("div.container"); // (2)$

  • jquery ready(fn)事件使用介绍

    jquery ready(fn)事件使用介绍

    1.事件简介 (1)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数: (2)请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件: (3)可以在同一个页面中无限次地使用$(document).ready()事件: (4)其中注册的函数会按照(代码中的)先后顺序依次执行. 2.事件格式 $(document).ready(function(){ //jQuery代码 }); 3.实例 复制代码 代码如下: <!DOCT

  • JQuery onload、ready概念介绍及使用方法

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法 复制代码 代码如下: $(function(){ // do something }); 其实这个就是jq ready

  • jQuery之$(document).ready()使用介绍

    学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件.所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载之前. If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it

  • jQuery的ready方法详解

    jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 复制代码 代码如下: DOMContentLoaded = function()  {          //取消事件监听,执行ready方法     if ( document.addEventListener )     {             

  • jquery ready()的几种实现方法小结

    1.最常用也是最标准的 复制代码 代码如下: $(document).ready(){ }); 2.是上面的简写: 复制代码 代码如下: $(function(){ }) 很奇怪?为什么能这样?不是判断document对象是否 reADy然后才执行函数的么?document哪去了?我们看下jQuery的源代码: 复制代码 代码如下: // jQuery的构造函数: var jQuery = function( a, c ) { // $(document).ready()的简写形式,只有在$(f

  • jQuery 源码分析笔记(4) Ready函数

    这个功能在 jQuery的文档中提到了三种等价的形式: 复制代码 代码如下: // 定义在jQuery.fn.ready $(document).ready(handler); // 和上一个是同一个,不推荐 $().ready(handler); // 单独在jQuery对象中处理 $(handler); // 以上这个形式的定义: if(jQuery.isFunction(selector) { return rootjQuery.ready(selector); } 因此实际上都归结与一个

  • jQuery中ready事件用法实例

    本文实例讲述了jQuery中ready事件用法.分享给大家供大家参考.具体分析如下: 此事件会在文档加载就绪以后触发,也就是当DOM对象已经加载,并且网页内容全部呈现时候触发. ready()方法可以为ready事件绑定事件处理方法,并且此方法的选择器是唯一的,那就是document对象. 语法形式有三种,后两种是第一种的简写. 语法结构: 语法一: 复制代码 代码如下: $(document).ready(function) 语法二: 复制代码 代码如下: $().ready(function

随机推荐