onload事件和DOMContentLoaded事件

最新推荐文章于 2023-10-16 15:29:19 发布
最新推荐文章于 2023-10-16 15:29:19 发布
阅读量538 收藏 1
点赞数 4
文章标签： jquery javascript html
1
本文链接：https://blog.csdn.net/m0_56272227/article/details/120338704
版权
onload事件和DOMContentLoaded事件

  • onload事件：等待页面所有资源（包括dom树，图片，第三方框架）加载完毕，再执行代码

    • 在这里插入图片描述

  • DOMContentLoaded事件：等待页面dom树加载完毕，再执行代码

    • jquery中使用的$(document).ready(function(){}),实际上监听的就是DOMContentLoaded事件
      在这里插入图片描述
是小张吖~
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
window.onload和DOMContentLoaded的区别
skysys的研究小屋
08-13 2589
一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。 二、为什么要区分？ 开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函
一些主流JS框架中DOMReady事件的实现小结
01-19
为了解决这个问题，ff中便增加了一个DOMContentLoaded方法，与onload相比，该 方法触发的时间更早，它是在页面的DOM内容加载完成后即触发，而无需等待其他资源的加载。Webkit引擎从版本525（Webkit nightly 1/2008:...
JS DOMReady事件的六种实现方法总结
01-19
在实际应用中，我们经常会遇到这样的场景，当页面加载完成后去做一些事情：绑定事件、DOM操作某些结点等。 原来比较常用的是window的onload 事件，而该事件的实际效果是：当页面解析/DOM树建立完成，并完成了诸如图片、脚本、样式表甚至是iframe中所有资源的下载后才触发的。 这对于很多实际的应用而言有点太“迟”了，比较影响用户体验。 为了解决这个问题，ff中便增加了一个DOMContentLoaded方法，与onload相比，该方法触发的时间更早，它是在页面的DOM内容加载完成后即触发，而无需等待其他资源的加载。 Webkit引擎从版本525（Webkit nightly 1/2008
VUE（nuxt）项目性能监测统计
泥猴桃的博客
03-12 2043
最近有个需求是监测性能，要求在移动端项目里统计控制台（如下图）最后一行的Finish，DOMContentLoaded和Load三个时间。 一、指标解释 （1）Finish Finish 时间是页面上所有 http 请求发送到响应完成的时间，HTTP1.0/1.1 协议限定，单个域名的请求并发量是 6 个，即Finish是所有请求（不只是XHR请求，还包括DOC，img，js，css等资源的...
Vue声明周期以及钩子函数
czj1049561601的博客
03-07 317
Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 一般情况下： 会在created中做一些网络请求，Vue对象创建好后，就会在created中请求一些数据，然后把这些数据放在data中，再在DOM中进行渲染。 Vue.js官网中声明周期部分链接导航 vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。 在组件中常用的方法有
onload 事件、DOMContentLoaded事件、DOM加载顺序
djx6296859的博客
03-18 286
1、onload 事件 定义与语法 onload事件会在页面或者图像加载完成后立即发生。 法：onload="SomeJavaScriptCode“； 参数：SomeJavaScriptCode 描述：必需。规定该事件发生时执行的 JavaScript。 支持该事件的 HTML 标签：<body>, <frame>, <frameset&gt...
「深入探究Web页面生命周期：DOMContentLoaded、load、beforeunload和unload事件」
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
10-16 2645
页面生命周期的四个重要事件：DOMContentLoaded、load、beforeunload 和 unload，定义了页面从加载到卸载的不同阶段。这些事件可以帮助我们在合适的时机执行相关的操作，提供更好的用户体验和数据处理。DOMContentLoaded 事件在 HTML 和 DOM 树加载完成后触发，适用于执行与 DOM 相关的初始化操作。load 事件在整个页面及其外部资源加载完成后触发，适用于执行与页面渲染和交互相关的操作。
vue移动端开发的前面预适配
qq_34169711的博客
02-07 132
在APP.vue里面设置这个 document.addEventListener('DOMContentLoaded',()=>{ const html=document.querySelector('html') let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; ...
关于DOMContentLoaded死活无效的解决方案
cxyd4399的博客
05-11 1073
let observer = new MutationObserver( (mutationRecords) => { for (let mr of mutationRecords) { for (let el of mr.addedNodes) { if (el.nodeName === 'DIV') { alert("..
页面生命周期：DOMContentLoaded, load, beforeunload, unload解析
廿四桥明月夜的博客
08-18 1050
原文地址：http://javascript.info/onload-ondomcontentloaded HTML页面的生命周期有以下三个重要事件： DOMContentLoaded — 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是 &lt;img&gt; 和样式表等外部资源可能并没有下载完毕。 load — 浏览器已经加载了所有的资源（图像，样式表等）。 beforeu...
DOMContentLoaded与load的区别
qq_35165469的博客
09-18 435
(1)在chrome浏览器的开发过程中，我们会看到network面板中有这两个数值，分别对应网 络请求上的标志线，这两个时间数值分别代表什么？ (2)我们一再强调将css放在头部，将js文件放在尾部，这样有利于优化页面的性能，为什么这种方式能够优化性能？ (3)在用jquery的时候，我们一般都会将函数调用写在ready方法内，这是什么原理？ 什么是DOMContentLoaded？ ...
提取jquery的ready()方法单独使用示例
01-19
Firefox有DOMContentLoaded事件可以轻松解决，可惜的就是IE没有。 MSDN关于JSCRIPT的一个方法有段不起眼的话，当页面DOM未加载完成时，调用doScroll方法时，会产生异常。那么我们反过来用，如果不异常，那么就是页面...
littlepjs-document-onload-dc-web-120919
02-28
从基础html完全解析页面的DOM时，将触发DOMContentLoaded事件 资源及其所有从属资源（包括CSS和JavaScript）完成加载后，将触发load事件 在本课程中，我们将重点介绍DOMContentLoaded 。 为什么DOMContentLoaded很...
somepjs-document-onload-dc-web-102819
02-28
从基础html完全解析页面的DOM时，将触发DOMContentLoaded事件 资源及其所有从属资源（包括CSS和JavaScript）完成加载后，将触发load事件 在本课程中，我们将重点介绍DOMContentLoaded 。 为什么DOMContentLoaded很...
onload和DOMContentLoaded事件
wlqdbtx的博客
12-19 1011
1.onload事件 ​在页面的所有资源加载完成时，window对象上会触发一个onload事件。此时页面的DOM树已经构建完成，并且完成了所有图片、样式表、脚本等资源也已经加载完成。但是存在的问题是，当资源过多过大时，onload会出现比较严重的延迟问题，严重影响用户体验。 2.DOMContentLoaded事件 对比onload事件，DOMContentLoaded事件就更加合...
加载,三大家族,延时器,递归location对象navigator对象history对象
龙骑士-黎明的博客
06-06 109
加载,三大家族,延时器,递归location对象navigator对象history对象
dom加载后执行 vue_如何在Vue完全加载和初始化后运行VueJS代码？
weixin_29214559的博客
01-15 517
I am working on a Vue component that will be placed on multiple websites via a CMS system. The issue I encounter is that even if my js scripts loading order is correct, sometime I get this error:Uncau...
vue-router为什么会加载两遍dom?_DOM探索之-domReady
weixin_39916379的博客
12-09 513
还记得刚开始学习JavaScript时候，经常会犯这样的错误： Dom not ready 这里是h1元素包含的内容 最后发现结果并不是我们想要的，文字并没有变成红色，我想最先入门学习JavaScript操作DOM时候多多少少会遇到这种困惑和错误，其实出现这种问题的原因就是我们没有区分HTML标签和DOM节点的区别的缘故了,由这个问题就引出下面要说的domReady和浏览器渲染解析原...
前端性能优化——首页资源压缩63%、白屏时间缩短86%
Jk200165的博客
04-12 541
async、defer 是 script 标签的专属属性，对于网页中的其他资源，可以通过 link 的 preload、prefetch 属性来预加载如今现代框架已经将 preload、prefetch 添加到打包流程中了，通过灵活的配置，去使用这些预加载功能，同时我们也可以审时度势地向 script 标签添加 async、defer 属性去处理资源，这样可以显著提升性能本文主要介绍的是代码层面。
domcontentloaded和onload
03-16
`DOMContentLoaded` 事件表示文档的 DOM 已经被完全加载和解析，不需要等待样式表、图像和子框架的完成加载。 `onload` 事件表示页面上所有的资源已经完成加载，包括图像、样式表、脚本等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值