onload,window.onload,DOMcontentLoaded

最新推荐文章于 2023-11-25 12:35:37 发布
最新推荐文章于 2023-11-25 12:35:37 发布
阅读量629 收藏 3
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000017496800
版权

onload事件

定义和用法
onload 事件会在页面或图像加载完成后立即发生。

语法

onload="SomeJavaScriptCode"

参数 描述

    SomeJavaScriptCode    必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：

    <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象：

    image, layer, window

window.onload

什么时候触发？

在文档加载完成后能立即触发

window.onload的用法

页面中的代码一般情况下按照，从上到下，从左到右的顺序执行。
所以当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window.onload；如果script放在了元素后面，就不需要加 window.onload。

DOMContentLoaded

什么时候触发？

初始的 HTML 文档被完全加载和解析完成之后，（浏览器DOM树形成之后）而无需等待样式表、图像和子框架的完成加载。但是必须等待其所属script之前的样式表加载解析完成才会触发

用法
jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件

二者区别详解

看这里

weixin_34125592
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
window.onload用法详解
weixin_33835690的博客
02-20 1501
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。二.通过window.onload来执行脚本代码。第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，...
IE中图片的onload事件无效问题和解决方法
09-04
此外，如果需要在所有浏览器中保持一致的行为，还可以考虑使用`window.onload`或`document.DOMContentLoaded`事件来确保在所有图片加载完毕后再执行后续操作。但请注意，这些全局事件可能会影响整个页面的加载时机，...
JavaScript的window.onload事件的理解
热门推荐
zhansan的博客
05-21 2万+
window.onload()的作用 window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。 window.onload() 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。 只有一个要执行的函数语法： window.onload = funcRef; 在页面加载完成后 funcRef 方法会被调用。 有多个要执行的函数语法： window.οnlοad=function(){ Func1(); Fun
关于JS的--window.onload()方法
冯小东
05-23 1万+
一、window.onload()方法： 该方法用于在网页加载完毕后立刻执行的操作，即当html加载完毕后，立刻执行某个方法等。 二、为什么使用window.onload()? 因为JS中的函数方法等需要在HTML文档渲染完成才可以使用，如果没有渲染完成，此时的DOM树是不完整的，这样JS文件就可能报出"undefined"错误。 三、常见的用法： 简单的立刻执行函数，假
性能优化之window.onload
2301_78287784的博客
07-03 570
最近在做一些性能优化相关的工作，相信大家在工作过程中也会遇到一些性能优化相关的场景，这对于前端开发者来讲是一项加分技能。为了我们的用户在使用我们的产品时能够有一个非常好的体验，我们需要对页面进行诊断优化。在行业中，我们的页面P90在两秒内算是达标，超过这个时间那么你就可能会流失部分用户。TIP：P90指的是页面性能数据从小到大排序，在90%位置的数据。比如：P90为两秒，那它的意思就是90%的用户都能够在两秒内打开页面对于性能优化内容可能比较多，我们这里就先着重了解相关内容。
window.onload方法
最新发布
weixin_61133168的博客
11-25 848
为按钮绑定了一个事件，点击按钮时没反应。虽然我们写好了函数，但是它并没有执行。应该让它在页面加载的时候就执行。
offsetHeight在OnLoad中获取为0的现象
09-05
在其他浏览器中，通常使用 `addEventListener` 监听 `DOMContentLoaded` 或 `window.onload` 事件来确保元素已经完全加载并计算尺寸。 总的来说，`offsetHeight` 在 `onload` 事件中获取为 0 主要是因为浮动布局...
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
09-05
另外，可以考虑使用`window.onload`或`DOMContentLoaded`事件来确保整个页面资源（包括外部样式表）加载完毕后再执行特定操作。 总的来说，onload和onreadystatechange事件在浏览器之间的支持并不统一，这要求...
Web前端开发技术-window对象.pptx
07-07
- **`window.onload`**：这是网页完全加载完成，包括所有资源如图片、脚本文件、CSS文件等加载完毕后触发的事件。你可以通过两种方式绑定事件处理函数： ```javascript // 方式1 window.onload = function () { ...
JQ中$(window).load和$(document).ready区别与执行顺序
10-20
另一方面，`$(window).load()`，对应于window.onload事件，是在页面上所有内容，包括图片、框架、样式表和其他异步加载的资源都完全加载完毕后触发的。这意味着用户看到的页面已经是完全呈现的状态。对于那些需要...
window onload
firstbird的博客
09-21 607
first 1.当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window.onload；如果script放在了元素后面，就不需要加 window.onload。（非必须） 2， window.onload是html页面的所有文档都加载完毕后，执行window.onload里的内容。因而加了window.onload的main.js不论在html的哪个位置引入，均不会出...
window.onload()方法和window.onscroll()方法
weixin_46370867的博客
11-17 6733
也许你想成为太阳，可你却只是一颗星辰；也许你想成为大树，可你却是一棵小草。于是，你有些自卑。其实，你和别人一样，也是一片风景：做不了太阳，就做星辰，在自己的星座发光发热；做不了大树，就做小草，以自己的绿色装点希望…… 下面是对window对象中 window.onload()方法和window.onscroll()方法的整理，希望可以帮助到有需要的小伙伴 JavaScript window对象 BOM中最核心的对象就是Window对象 window对象是浏览器窗口中的顶级(全局)对象 window对象的属性
window.onload用法
KekekeooeyMigo的博客
03-18 3766
在编写js的时候，习惯性的将script放在head中，就经常导致出现使用body中的id报错(xxx is not defined)，后来发现window.onload可以解决这个问题。 这里是编写随机十六进制的颜色为例子。 <script> var color = '0123456789abcdef' var Sj = '' function co() { for (i = 0; i < 6; i++
深入理解 window.onload
树上骑个猴的博客
08-12 4377
现象：在一个 Hybrid 应用中，用户反馈弱网条件下页面的进度条总是不消失，最后发现是页面接口先于其他资源返回，而接口中包含大量图片导致了 onload 会推迟，从而客户端控制的进度条不会消失，页面调用客户端的方法不会执行。 先放结论 onload的触发时机： JS 加载并执行完毕且页面中所有外链资源加载完成之后大约 3 - 4ms（这个值跟机型和浏览器有关） 最佳实践： JS代码的执行要放到onload里。如果是服务端渲染带图片的列表，图片最好由JS异步加载，避免阻塞onload。 1、onload不是
js中window.onload的含义作用
爬楼梯的前端小白的博客
02-02 6156
js中window.onload的意思
document onload和window onload的区别？
LuckXinXin的博客
03-04 7721
答： Document.onload：是在结构和样式加载完成才执行的JS。 Window.onload:不仅仅要在结构和样式加载完，还要执行完所有的样式，图片这些资源文件，完全加载完才会触发Window.onload事件。 ...
前端里那些你不知道的事儿之 【window.onload】
京东科技开发者
04-03 392
相信很多前端开发者在做项目时同时也都做过页面性能优化，这不单是前端的必备职业技能，也是考验一个前端基础是否扎实的考点，而性能指标也通常是每一个开发者的绩效之一。
window.onload()函数和jQuery中的document.ready()有什么区别（面试题）
m0_73671382的博客
07-13 801
另外，document.ready()也可以简写为$(function() {})，这是因为$()函数是jQuery中的标识符，也可以被称为别名，等同于使用jQuery()。所以，$(function() {})实际上就是$(document).ready(function() {})的简写形式。而在jQuery中的document.ready()函数中，多个函数绑定时并不会出现覆盖问题，而是将所有函数都存储在一个数组中，待页面加载完成后依次执行数组中的函数，因此可以同时编写多个函数。
javascript中的window.onload解释
m0_53127809的博客
01-02 1831
window.onload 我们都知道的是我们的前端页面都是从上向下加载，也就是说我们的javascript文件如果放在文本页面文件的上方，我们就会先加载javascript中的文件，而此时带来的问题就是，我们的javascript中的事件对象此时有可能还未被加载，导致代码错误。 我们的window.onload可以很好地有效的解决这个问题。我们都知道，window.onload代表的是一个事件，也就是该事件的发生会导致函数的调用。而window.onload代表的事件就是页面加载的结束，也就是说，不管
window.onload事件和window.afterload事件的区别
07-14
因此，正确的比较应该是 "window.onload" 事件和其他类似的事件，如 "DOMContentLoaded" 事件。 下面是 "window.onload" 事件和 "DOMContentLoaded" 事件之间的区别： 1. 触发时机： - window.onload 事件在整个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值