JS - DOM_Ready、DOM_Load 区别

简介: JS - DOM_Ready、DOM_Load 区别

页面加载完成有两种事件:

一、ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)。
二、onload,指示页面包含图片等文件在内的所有元素都加载完成。


1、Dom Ready

/* 使用jq时一般都是这么开始写脚本的 */
$(function(){ 
      // do something 
});
/* jq ready()的简写,它等价于 */
$(document).ready(function(){
     //do something
})
/* 或者下面这个方法,jq的默认参数是:"document" */
$().ready(function(){
    //do something
})
/* JS ready 实现方式 */
document.ready=function(){...} // 1:无参函数
document.ready() // 执行1
document.ready = function(callback) { // 2:自定义函数
  //兼容FF,Google
  if(document.addEventListener) {
    document.addEventListener('DOMContentLoaded', function() {
      document.removeEventListener('DOMContentLoaded', arguments.callee, false);
      callback();
    }, false)
  }
  //兼容IE
  else if(document.attachEvent) {
    document.attachEvent('onreadystatechange', function() {
      if(document.readyState == "complete") {
        document.detachEvent("onreadystatechange", arguments.callee);
        callback();
      }
    })
  } else if(document.lastChild == document.body) {
    callback();
  }
}
document.ready(function(){ // 执行2
   alert('Document is ready!')
})

Ps:这个就是jq ready()的方法就是Dom Ready,它的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况一个页面响应加载的顺序:域名解析--加载html--加载js和css--加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。


1. window.onload = function(){...}
2. document.ready = function(){...}

Ps1:2本身不会自启动,但是1可以自启动,所以2需要document.ready()来启动。
Ps2:如果1和2同时存在,无论顺序如何,都先执行2,再执行1。



2、Dom Load

window.onload=function(){
      //do something
}
/* 或者经常用到的图片 */
document.getElementById("imgID").onload=function(){
     //do something
}

Ps:那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。


3、附加

/* 在所有DOM元素加载之前执行的jQuery代码 */
<script type="text/javascript">
(function() {
            alert("DOM还没加载哦!");
        })(jQuery)
</script>
目录
相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
29天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
26 1
|
2月前
|
JavaScript 前端开发 算法
真实DOM和虚拟DOM有哪些区别?
本文介绍了真实DOM和虚拟DOM的概念、使用方式、优势、劣势、使用场景、影响因素、开发效率和性能对比。真实DOM是浏览器提供的原生接口,直接操作简单直观,但频繁操作会导致性能损耗。虚拟DOM是真实DOM的抽象表示,通过比较差异减少DOM操作,适用于大规模数据变更和复杂交互的页面。开发者应根据具体需求选择合适的DOM操作方式,以提高页面性能和开发效率。
103 1
真实DOM和虚拟DOM有哪些区别?
|
1月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
108 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
79 4
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
21 2
下一篇
DataWorks