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>
目录
相关文章
|
3天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
1天前
|
前端开发 JavaScript
前端 JS 经典:i,i++,++i区别
前端 JS 经典:i,i++,++i区别
5 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:let、const、var 区别
前端 JS 经典:let、const、var 区别
5 0
|
1天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
|
2天前
|
JavaScript 前端开发
探索JavaScript中的let、const和var:区别与使用场景
探索JavaScript中的let、const和var:区别与使用场景
|
2天前
|
前端开发 JavaScript Java
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
|
3天前
|
JavaScript 前端开发 开发者
.js 文件和 .mjs 文件的区别
.js 文件和 .mjs 文件的区别
18 0
|
3天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
9 2
|
3天前
|
移动开发 JavaScript 前端开发
uni-app和Vue.js二者之间有什么区别?
1. uni-app是一个使用Vue.js开发所有前端应用的框架,支持一次编译多端运行。开发者编写的基础代码只需进行一次编写,就可以发布到多个平台,包括App、H5、微信小程序等。 2. Vue.js是一个渐进式JavaScript框架,用于构建用户界面。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。
6 0
|
3天前
|
Web App开发 JavaScript 前端开发
Ecmascript 和javascript的区别
Ecmascript 和javascript的区别
11 0