jQuery为啥要提供一个load()方法?
2016-01-17 15:39
736 查看
上午的时候,找个闲暇事件整理之前整理的一些关于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对象。
这就是jQuery提供了load()方法的主要考虑了。
上面两个方法最重要的差别在于:$(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实现拖动排序并将排序结果保…
- jQuery中的DOM操作(一)
- jquery学习总结
- jQuery Validate 表单验证插件----自定义一个验证方法
- jQuery选择器小结
- jQuery Validate 表单验证插件----自定义校验结果样式
- Jquery ajax的标准写法
- JQuery实现网页右侧随动广告特效
- JQuery实现网页右侧随动广告特效
- jquery.rotate插件实现抽奖的旋转效果
- Javascript/jQuery 获取地址栏URL参数的方法
- jquery 对checkbox操作
- jquery中的end()方法
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中
- jquery的一些小知识点
- Jquery 淡入淡出
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
- jquery的attr的一些bug
- Jquery 动画效果 左右移动
- jquery tmpl 详解