标签:blog io sp java strong on 文件 div log
JQuery里有ready和load事件
$(document).ready(function() { // ...代码... }) //document ready 简写 $(function() { // ...代码... }) $(document).load(function() { // ...代码... })
他们的主要区别为ready先执行,load后执行。
DOM文档加载的步骤:
(1) 解析HTML结构。 (2) 加载外部脚本和样式表文件。 (3) 解析并执行脚本代码。 (4) 构造HTML DOM模型。//ready (5) 加载图片等外部文件。 (6) 页面加载完毕。//load
从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了,但是load要在第(6)步完成之后才执行。
结论:
ready与load的区别就在于资源文件的加载,ready构建了基本的DOM结构,所以对于代码来说应该越快加载越好。在一个高速浏览的时代,没人愿意等待答案。假如一个网站页面加载超过4秒,不好意思,你1/4的用户将面临着流失,所以对于框架来说用户体验是至关重要的,我们应该越早处理DOM越好,我们不需要等到图片资源都加载后才去处理框架的加载,图片资源过多load事件就会迟迟不会触发。
一个实例:
document.addEventListener("DOMContentLoaded", function() { console.log(‘DOMContentLoaded回调‘) }, false); window.addEventListener("load", function() { console.log(‘load事件回调‘) }, false); console.log(‘普通方法一‘) //测试加载 $(function(){ console.log(‘jquery ready‘) }) console.log(‘普通方法二‘)
执行的顺序为:
普通方法一 普通方法二 jquery ready DOMContentLoaded回调 load事件回调
标签:blog io sp java strong on 文件 div log
原文地址:http://www.cnblogs.com/dtdxrk/p/4137374.html