上午的时候,找个闲暇事件整理之前整理的一些关于jQuery的东西,看到了一个之前做的jQuery的$(document).ready()与window.onload()方法的比較。

上面两个方法最重要的差别在于：$(document).ready()的触发实际是HTML的这棵DOM树建建立的时候,就触发了这个ready()函数的运行。可是windows.onload()方法则是在DOM树建立之后，而且DOM中带有URL属性的元素都被载入到本地之后，才会去运行。





  说的简单一点。就是一个页面载入分成三个步骤：

1）浏览器接收到纯文本的HTML

2）HTML依据XHTML的规则，将其解析成为一个DOM树

3）浏览器遍历DOM中带有再次请求信息的节点，比如image。通过这些节点上的信息。将远程的资源获取到本地（或者是从cache中获取）

  然后，经过浏览器的解析之后，你看到的就是整个页面了。

当中。$(document).ready()方法的触发时机是在第二步结束,而window.onload()方法的出发时机则是在第三步结束之后。





  联想到一个问题，假设我须要在document.ready()方法中。获取图像的大小应该怎么办呢？由于ready()方法的触发时机被人为的提前了，带来了非常多优点。可是也必定存在类似这种弊端。jQuery还是考虑到了这种情况，而且做了对应的解决方式，在他的文档里面，有一个load()方法,就是用来解决这种问题。

直接把代码copy上来吧。注意onload方法适用于以下几个对象：images、frames、scripts、window对象。

<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

	<head>

		<script type="text/javascript" src="jquery-1.3.1.js"></script>

		<script type="text/javascript">

			$(function(){

				$("#image").load(function(){

					alert($("#image").width());

				});

			})

		</script>

	</head>

	<body>

		<select multiple="multiple">

			<option value="1">Oracle</option>

			<option value="2">Java</option>

			<option value="3">C++</option>

		</select>

		<img id="image"

		src="http://t1.baidu.com/it/u=2624739849,4151443416&fm=32&picname=8441c36b01d987e6ca8054e6d69615f8.jpg">

	</body>

</html>

</span>

这就是jQuery提供了load()方法的主要考虑了。

jQuery为啥要提供一个load()方法?的更多相关文章

  1. Hibernate 中 load() 方法导致的 noSession 异常

    之所以要写这个,是因为最近碰到了一个延迟加载的 load() 导致出现 noSession 的异常. 下面第三种方式解决这个问题需要用到一个本地线程的对象,也就是 ThreadLocal 类,之前写过 ...

  2. 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...

  3. jQuery load()方法用法集锦！

    调用load方法的完整格式是:DE>load( url, [data], [callback] ),其中DE> DE>urlDE>:是指要导入文件的地址. DE>data ...

  4. jQuery Ajax之load()方法

    jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJ ...

  5. jquery 实践操作：load()方法

    最近决定总结下实际项目中的 JS 相关的一些操作,因此开启此系列,记录使用过程中用到的一些实用操作问题和解决方法,给自己一份记录. jquery load方法是对jQuery.ajax()进行封装以方 ...

  6. load()方法---------jQuery动态加载html

    jquery代码 $("#div").load("test.html"); test.html   ----------------被加载页面(有<HTM ...

  7. 关于IE8中使用Jquery load方法无法正常加载页面

    最近发现,在IE8中使用Jquery load方法时无法正常加载页面,页面显示空白,没有加载.调试发现,页面多了一个</div>标签,但在FF和CH下表现正常.希望能给遇到同样问题的码农有 ...

  8. 使用Jquery.load()方法,出现-此页的状态信息无效，可能已损坏。[转]

    今天遇到此页的状态信息无效,可能已损坏,在以下页面找到解决办法,特记录下来: 转自:http://www.cnblogs.com/liuwenlong/archive/2011/05/09/20410 ...

  9. jQuery AJAX load() 方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...

随机推荐

  1. C# 使用PictureBox控件--点击切换图片

    效果: 1. 2. 代码: private Boolean fals = true; /// <summary> /// 单击事件 /// </summary> /// < ...

  2. VS2010 ，工程文件减肥

    写一个bat文件来清理VS2010工程文件. 将其放入到工程文件夹下,双击即可自动将sdf,ipch等占用空间很大的文件删除. 这样的方式较之于转移浏览数据库文件的位置而言更为灵活一些,不用特别的设置 ...

  3. [转载] iOS开发分辨率那点事

    1 iOS设备的分辨率 iOS设备,目前最主要的有3种(Apple TV等不在此讨论),按分辨率分为两类 iPhone/iPod Touch 普屏分辨率    320像素 x 480像素 Retina ...

  4. Activity跳转时传递Bitmap对象的实现

    前言 相信大家可能都了解Activity跳转时我们是能够传递參数的,比方使用Intent传递或者Bundle来传递,把当前Activity的一些信息传递给将要跳转到的新的Activity.可是不知道大 ...

  5. Android_Service组件详解

    1.Service概述 Service服务是一个没有用户界面的在后台运行执行操作的应用组件,其它组件可以通过Intent意图启动这个Service去完成特定的功能,比如通过Service可以完成播放音 ...

  6. 如何灵活使用 ActionBar， Google 音乐ActionBar 隐藏和显示效果

    ActionBar 的历史这里就不介绍了,相信大家都清楚:在一个 app 中,如果 ActionBar 运用的好,那么将会省去大量的代码,而且整个 app 效果也相当不错,大家有兴趣可以下载 goog ...

  7. JEECG社区 一个微信教育站点案例源代码分享

    微信教育站点案例演示: http://t.cn/RvPgLcb 源代码分享: http://pan.baidu.com/s/1cUImy 截图演示: watermark/2/text/aHR0cDov ...

  8. 程序集的内部结构(托管模块、元素局、IL代码的分布情况)

    程序集的内部结构 在看程序集的结构之前,我们先来看托管模块的结构. 托管模块由四部分组成:PE32头.CLR头.元数据(Metadata).IL代码.其中PE32头是用来决定托管模块运行的系统环境(3 ...

  9. 官方发布的新版本Qt已经不支持XP了，要自己从源代码编译

    官方发布的新版本Qt已经不支持XP了,要自己从源代码编译,编译选项里有个-target项,用来提供XP支持的,编译时加上-target xp就可以了 http://www.qtcn.org/bbs/r ...

  10. 使用 Spring RestTemplate 调用 rest 服务时自定义请求头（custom HTTP headers）

    在 Spring 3.0 中可以通过  HttpEntity 对象自定义请求头信息,如: private static final String APPLICATION_PDF = "app ...