document load 和 document ready 的区别

简介: document load 和 document ready 的区别


       文档解析过程中,ready在加载图片等外部资源前触发,load在之后触发。如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready

DOM文档解析:

  1. 解析html结构
  2. 加载脚本和样式文件
  3. 解析并执行脚本
  4. 构造html的DOM模型 // ready
  5. 加载图片等外部资源文件
  6. 页面加载完毕 // load


页面加载完成有两种事件

1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数

缺点:如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响

代码形式:


//document load
$(document).load(function(){
    ...code...
})

 

2.$(document).ready()是当DOM文档树加载完成后执行一个函数 (不包含图片,css等)所以会比load较快执行

在原生的jS中不包括ready()这个方法,Jquery才有,jquery中有 $().ready(function)。

代码形式为:


//document ready
$(document).ready(function(){
    ...code...
})
//document ready 简写
$(function(){
    ...code...
})


相关文章
|
4月前
|
JavaScript
document load 和 document ready 有什么区别
document load 和 document ready 有什么区别
80 0
|
3月前
|
JavaScript 前端开发
load、$(document).ready、DOMContentLoaded的区别
load、$(document).ready、DOMContentLoaded的区别
|
3月前
|
JavaScript 前端开发 测试技术
document.write()方法总结
document.write()方法总结
|
4月前
|
JavaScript 前端开发
document.write和innerHTML、innerText 的区别
document.write和innerHTML、innerText 的区别
46 5
|
4月前
|
JavaScript 前端开发
document load 和 document ready 的区别
document load 和 document ready 的区别
44 0
|
4月前
|
JavaScript 前端开发 UED
深入理解 Document Load 和 Document Ready 的区别
深入理解 Document Load 和 Document Ready 的区别
63 0
|
4月前
|
JavaScript 前端开发
$(document).ready()方法和window.onload有什么区别?
$(document).ready()方法和window.onload有什么区别?
40 0