码迷,mamicode.com
首页 > 其他好文 > 详细

doment ready事件和load事件的区别及实现

时间:2019-10-13 23:41:47      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:add   dos   浏览器   前置   read   事件监听   参考   加载   属性   

从2017年9月至今工作中大部分使用react,前端渲染的一些基础性知识记忆不是很深刻了。面试**公司的时候,碰到“document ready和load的区别,以及document ready事件的实现”的笔试题,区别倒是回答出来了,ready事件只回答了readystatechange事件。回答的不是很全面,特在此记录。

document ready: 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的加载完成。
load: window:load event,整个页面已经加载完毕,包括页面依赖的一些资源(样式表、图片等)。Element:load,资源元素例如image标签已经加载完毕

load事件的实现不需要说,可以通过onload事件回调属性和addEventListener(‘load‘, 回调)监听load事件。
document ready事件在jquery里有很完整的实现,在谷歌浏览器中主要是通过document的DOMContentLoaded事件类型配合document.readyState === “complete”做前置检测(有可能添加事件监听的时候,document ready事件已经触发了)。在IE中iframe是通过onreadystatechange,而非iframe还要进一步通过document.documentElement.doscloll

参考来源:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
  2. https://github.com/jquery/jquery/blob/1.5b1/src/core.js

doment ready事件和load事件的区别及实现

标签:add   dos   浏览器   前置   read   事件监听   参考   加载   属性   

原文地址:https://www.cnblogs.com/bellhey/p/11668938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!