onload 和 domready

博客地址:https://ainyi.com/46

window.onload 事件会在页面或图像加载完成后触发(即所有元素的资源都下载完毕)

如果页面上有许多图片、音乐或 falsh 还没加载完成,onload 事件就会迟迟无法触发

所以出现了 DOM Ready 事件

熟悉 jQuery的人,都知道 DomReady 事件

$(document).ready(function(){
  alert("jQuery 的 DOM 准备完毕,资源还没加载完");
})

DomReady

DomReady 事件就是在 DOM 文档结构准备完毕后触发,即在资源加载前触发

DOMContentLoaded

DOMContentLoaded 事件比 onload 事件快许多,它是在 DOM 准备完毕后触发(不需等待资源下载完毕)

DOMContentLoaded 事件在许多 Webkit 浏览器以及 IE9 上都可以使用,此事件会在 DOM 文档准备好以后触发,包含在 HTML5 标准中

对于支持此事件的浏览器,直接使用 DOMContentLoaded 事件是最简单最好的选择

IE6,7,8 都不支持 DOMContentLoaded 事件。所以目前所有的 hack 方法都是为了让 IE6,7,8支持 DOM Ready 事件

下面代码可以发现 jQuery 的 ready 事件稍微早于 DOMContentLoaded 事件,但都是实现了 domready 事件(dom 加载完毕,资源加载前触发)

document.addEventListener('DOMContentLoaded', function(){
  alert("DOM准备完毕,资源还没加载完");
}, false);
 
// jQuery 的 domready
$(document).ready(function(){
  alert("jQuery 的 DOM 准备完毕,资源还没加载完");
})
 
// 在 document 文档加载完成后就可以对 DOM 进行操作(即所有元素的资源都下载完毕)
window.onload = function(){
  alert("DOM 加载完毕,所有资源都下载完成");
}

// 或者经常用到的图片,假设这个
document.getElementById("imgID").onload = function(){
  alert("图片 id 为 imgID 加载完毕");
}

Dom Ready 和 Dom Load 两者的区别

1、Dom Ready 是在 dom 加载完成后就可以直接对 dom 进行操作,比如一张图片只要 img 标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等;

2、Dom Load 是在整个 document 文档(包括了加载图片等其他信息)加载完成后就可以直接对 dom 进行操作,比如加载一张图片,要等这个图标加载完成之后才能设置图片的宽高的属性或样式等;

onreadystatechange 事件

onreadystatechange 事件与 onload 一样,会在页面或图像加载完成后触发(即所有元素的资源都下载完毕),但是:

  • FireFox 的 script 元素不支持 onreadystatechange 事件,只支持 onload 事件
  • IE 的 script 元素支持 onreadystatechange 事件,不支持 onload 事件

在 IE 下,可以使用 onreadystatechange 完成 onload 事件,判断 readyState 是否等于 complete 或 loaded

document.onreadystatechange = function () {
  if (document.readyState === 'complete' || document.readyState === 'loaded') {
    alert('dom 和资源下载完毕')
  }
}

博客地址:https://ainyi.com/46

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java架构师历程

【datatable】Cannot read property ‘style’ of undefined问题解决

遇到这个问题的时候一开始我以为是引入的js有问题,后来研究了源码之后原来是datatable的列的数量和表头列的数量没有对齐,表头我定义的列是这样的

56910
来自专栏Android知识点总结

SpringBoot-09-之初阶整合篇(上)

这里简单的使用了jquery和vue两位前端大佬。 简单介绍一下:$.getJSON('http://localhost:8080/swords/findal...

13320
来自专栏WindCoder

JavaScript中字符串与数组的相关操作

如果不包含在数组中,则返回 -1,若是包含,则返回对应元素所在数组中的下标值,该值从0开始;

14810
来自专栏编程微刊

仿百度排列图片预览插件-Simple Lightbox

很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到...

29220
来自专栏编程微刊

jQuery实现点击图标div循环放大缩小功能

很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小...

19820
来自专栏前端侠2.0

表格内,设置许多元素的大小时,js的速度慢的办法

思路1:设置td为relative,input为absolute,然后设置input大小为td的大小。

17220
来自专栏Java架构师历程

介绍几个移动web app开发框架

jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化...

1.1K20
来自专栏服务端技术杂谈

Shopify发展史

Shopify的创始人是个滑雪爱好者,对当时存在的一些电商平台不满意最而自己建站,希望通过自己的网站售卖滑雪用品。

30830
来自专栏Java职业技术分享

并发模型比较

Golang 的特色之一就是 goroutine ,使得程序员进行并发编程更加方便,适合用来进行服务器编程。作为后端开发工程师,有必要了解并发编程面临的场景和常...

77100
来自专栏编程微刊

6款 jQuery Lightbox图片查看触控插件

偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来。 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www...

67040

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励