窗口加载事件

news/2024/12/5 8:15:16/

window.onload

window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,CSS文件等),就调用所处理函数。

window.onload = function(){};

或者

  window.addEventListener("load",function(){});
  • 有了window.onload就可以把JS代码写到页面元素的上方
  • 因为onload是等页面内容全部加载完毕,再去执行处理函数
  • window.onload 传统注册事件方式,只能写一次
  • 如果有多个,会以最后一个window.onload为准
  • 如果使用addEventListener 则没有限制
     

 addEventListener 

  • DOMCountentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等

  • 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间

  • 交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded事件比较合适。

  • 接收两个参数 
document.addEventListener('DOMContentLoaded',function(){})

区别

  • load等页面内容全部加载完毕,包括页面dom元素,图片,flash,css等
  • DOMContentLoaded 是DOM加载完毕,不包含图片 flash css 等就可以执行,加载速度比load更快一些

 


http://www.ppmy.cn/news/189821.html

相关文章

前端使用海康WEB播放器插件,播放摄像头监控视频

基于海康的WEB播放器插件,实现海康摄像头播放功能 之前的文章中有过前端播放直播或者监控视频,用过两个播放器,一个是前面有教程的cyberplayer百度智能云提供的WEB播放器,实现了功能,后来又用了EasyPlayer播放器也实现…

MongoDB原理+命令(增删改查✯数据导入导出✯备份与恢复✯克隆表✯创建多实列✯管理用于以及进程管理)!!!

深夜博文,满满干活 MongoDB概述1.MongoDB的优点2.MongoDB主要特性3.MongoDB 使用场景 MongoDB基础操作1.安装MongoDB2.单台服务器配置多实例3.MongoDB基本操作3.1进入数据库3.2创建表 (db.createCollection命令创建)3.3插入数据(可…

第五阶段-第五阶段高性能分布式缓存Redis

第五阶段 大型分布式系统缓存架构进阶 文章目录 第五阶段 大型分布式系统缓存架构进阶第一部分 Redis 快速实战第一节 缓存原理与设计1.1 缓存基本思想1.11 缓存的使用场景1.12 什么是缓存?1.13 大型网站中缓存的使用 1.2 常见缓存的分类1.21 客户端缓存1.22 网络端…

安卓开发的常见性能瓶颈

概述 本文主要研究基于安卓平台开发的常见性能瓶颈和解决方法 GUI Lagging 线程处理 冗长的操作会影响应用程序的响应性和流畅性,导致GUI滞后或ANR(应用程序无响应)崩溃。这两种情况通常都是由在UI线程中运行的阻塞性操作引发的。 事实上…

产品经理学习

在这里插入代码片产品经理学习 前言一、产品经理的基础认知;1.产品经理的定义;2.产品经理发展史:3.产品经理分类:4.产品经理在项目中的角色:5.产品经理的具体工作职责:6.产品经理必看十大类目网站7.产品经理…

分布式搜索

分布式搜索 初识elasticsearch 了解elasticsearch elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎,具备非常多强大功能,可以帮助我们从海量数据中快速找到需要的内容 ELK技术栈 elasticsearch结合kibana、Logstash、Beats&#…

NepCTF2022 WP

Web: Just Kidding 访问www.zip获取源码,发现是Larvel框架 有两个路由,其中hello路由是一个反序列化点,第三个路由是我用来查看Laravel版本的 也可以通过post访问获得Laravel版本为9.12.2,搜索到Laravel9的链子如下 https://xz…

3种方式构造HTTP请求详解(HTTP4)

构造HTTP请求方式 我们通过对HTTP请求协议报头格式的学习知道了,我们可以通过3种基本方式去构造HTTP请求! 而请求是在客户端构造的也就是属于前端的工作! 所以这3种构造请求的方式,大部分是通过前端代码来实现的,不过我们也可以通过java代码基于socket来实现! 基于HTML/JS实现…