ready与load

DOM文档加载步骤

1)解析HTML结构;
2)加载外部脚本和样式文件;
3)解析并执行脚本代码;
4)构造HTML DOM模型 ;//ready
5)加载图片等外部文件;
6)页面加载完毕。//load

ready事件:

// Jquery 代码如下:
$(document).ready(function(){...});  // 写法1
$(function(){...}); // 写法2 简写

ready事件在DOM结构绘制完成之后就会执行,这样能确保就算有大量的媒体文件没有加载出来,JS代码一样可以执行。

load事件:

 // Jquery 代码如下:
 $(window).load(function(){  }) 

load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一页网页有大量图片的话,则就出现网页文档已经呈现出来但网页数据(脚本初始化)还没加载完毕,导致load事件不能够即时被触发.

区别:

1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 

2.编写个数不同

window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
$(document).ready()可以同时编写多个,并且都可以得到执行 

3.简化写法

window.onload没有简化写法 
$(document).ready(function(){})可以简写成$(function(){});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,976评论 25 708
  • 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西...
    微醺岁月阅读 4,514评论 2 61
  • 腐蚀是材料在环境的作用下引起的破坏或质变,金属和合金的腐蚀主要是化学或电化学作用引起的破坏。有时同时包含机械、物理...
    因思道客阅读 2,953评论 0 0
  • 2017年4月9日 星期日 晴 今天风比较大,但也挡不住孩子要玩的心情,早饭后女儿对我说她今天想骑自行车,我说...
    仲蕊蕊妈妈阅读 160评论 0 0
  • 今天过得还行,早上把通信原理理论操完了,但是还有很多不懂,有时间回头看。下午看通信原理实验,和钰玟一起总算验收成功...
    乐观的自卑者阅读 150评论 0 0