基于javascript原生判断DOM是否加载完毕


Posted in Javascript onOctober 14, 2020

readyState

document.readyState 返回当前文档的状态,属性如下:

  • uninitialized 还未开始加载
  • loading 加载中
  • interactive 已加载,文档与用户可以开始交互
  • complete 加载完成

DOMContentLoaded

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

onload

当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了

根据执行时DOM是否已经装载完毕来决定是对回调函数进行同步调用还是异步调用。具体代码如下:

function onReady(fn){
  var readyState = document.readyState;
  if(readyState === 'interactive' || readyState === 'complete') {
  fn()
 }else{
   window.addEventListener("DOMContentLoaded",fn);
  }

}

onReady(function(){
 console.log('DOM fully loaded and parsed ');
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
js切换光标示例代码
Oct 10 Javascript
js创建对象的方法汇总
Jan 07 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 #Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 #Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 #Javascript
原生JS实现相邻月份日历
Oct 13 #Javascript
jquery简易手风琴插件的封装
Oct 13 #jQuery
原生js实现照片墙效果
Oct 13 #Javascript
js轮播图之旋转木马效果
Oct 13 #Javascript
You might like
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
Vue使用NProgress进度条的方法
2019/09/21 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
python如何在列表、字典中筛选数据
2018/03/19 Python
使用requests库制作Python爬虫
2018/03/25 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
益模软件Java笔试题
2012/03/27 面试题
自我鉴定的范文
2013/10/03 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
广告创意求职信
2014/03/17 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
建筑施工安全责任书
2014/07/24 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Golang Web 框架Iris安装部署
2022/08/14 Python