jQuery为啥要提供一个load()方法?

最新推荐文章于 2023-04-10 16:58:36 发布

陈字文

最新推荐文章于 2023-04-10 16:58:36 发布

阅读量3.7k

点赞数

分类专栏： JavaScript相关

本文链接：https://blog.csdn.net/ziwen00/article/details/38061935

版权

JavaScript相关专栏收录该内容

28 篇文章 0 订阅

订阅专栏

上午的时候,找个闲暇事件整理之前整理的一些关于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()方法的主要考虑了。

陈字文

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery为啥要提供一个load()方法?

上午的时候,找个闲暇事件整理之前整理的一些关于jQuery的东西,看到了一个之前做的jQuery的$(document).ready()与window.onload()方法的比较。上面两个方法最重要的区别在于：$(document).ready()的触发实际是HTML的这棵DOM树建建立的时候,就触发了这个ready()函数的执行，但是windows.onload()方法则是在DOM树建立之后，并
复制链接

扫一扫