domReady与onload

最新推荐文章于 2022-03-07 20:12:39 发布
最新推荐文章于 2022-03-07 20:12:39 发布
阅读量277 收藏
点赞数
文章标签： DOM   Javascript onload domReady
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Olivia0319/article/details/82749857
版权

今天写了一个小例子，但是出了一个错误：
Uncaught TypeError: Cannot read property ‘style’ of null。
代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试例</title>
		<style type="text/css">
			div{
				width:200px;
				height:200px;
				border:2px solid black;
				background-color:red;
			}
		</style>
		<script type="text/javascript">
			var d=document.getElementById('myDiv');
			d.style.backgroundColor="blue";
		</script>
	</head>
	<body>
		<div id="myDiv"></div>
	</body>
</html>

从这个错误来看，应该是使用的getElementById方法没有获取到div元素，如下：
在这里插入图片描述
查阅了一些资料，猜想应该是DOM树创建与渲染的问题。HTML文档只是用来显示内容的，行为操作还是要通过DOM实现而HTML标签要通过浏览器解析才能变成DOM节点。出现这个问题应该是运行脚本时DOM树还未创建完成，所以将脚本改为如下所示： 查阅了一些资料，猜想应该是DOM树创建与渲染的问题。HTML文档只是用来显示内容的，行为操作还是要通过DOM实现而HTML标签要通过浏览器解析才能变成DOM节点。出现这个问题应该是运行脚本时DOM树还未创建完成，所以将脚本改为如下所示：

<script type="text/javascript">
	window.onload=function(){
		var d=document.getElementById('myDiv');
		d.style.backgroundColor="blue";
	 }
</script>

在这里插入图片描述
此时发现背景颜色发生了变化，程序错误消失了，证明真的是DOM树创建的问题。于是去查了相关资料。发现使用onload还是会有一些缺陷，onload表示当页面所有元素加载完毕后才执行,所以当页面图片很多的情况下，载入图片耗费的时间较长，onload距离执行的时间越慢，影响用户体验，此时还可以使用domReady。domReady表示DOM树加载完毕执行,而不包括图片,iframe,flash等元素,只要DOM标签加载完毕则运行。如果我们需要在DOM树生成后并且其他资源加载以及渲染前就执行js代码的话，domReady是最好的选择。
W3C提供了一个DOMContentLoaded事件，该方法与onload相比触发时间更早，页面加载完DOM后立刻触发，但只有IE 9以上才支持这一事件。IE6,7,8都不支持DOMContentLoaded事件。以下是一个慕课教程中实现的IE6,7,8的domReady方法。对于现代浏览器则使用标准事件绑定方法直接绑定DOMContentLoaded事件：

if(document.addEventListener){
		document.addEventListener(‘DOMContentLoaded’,fn,false);
	}

IE下需模拟DOMContentLoaded：

function IEContentLoaded(fn){
	var d=window.document;
	var done=false;
	var init=function(){
		if(!done){
			done=true;
			fn();
		}
	};
	(function(){
		try{
			d.documentElement.doScroll('left');
		}
		catch(e){
			setTimeout(arguments.callee,50);
			return;
		}
		init();
	})();
	d.onreadystatechange=function(){
		if(d. readyState=='complete'){
			d.onreadystatechange=null;
			init();
		}
	}
}

关于以上代码中的几点注释：
onreadystatechange事件的目的是提供与文档或元素加载状态有关的信息，支持这个事件的对象有一个readyState属性，当属性值为complete表示对象已加载完毕。
doScroll：微软指出doScroll必须在DOM主文档准备完毕时才可以正常触发，所以通过doScroll判断DOM是否准备完毕。
总的来说，domReady方法实现如下：

function myReady(fn){
	if(document.addEventListener){
		document.addEventListener(‘DOMContentLoaded’,fn,false);
	}
	else{
		IEContentedLoaded(fn);
	}
}

测试该domReady方法是否可行：

<script src="domReady.js"></script>
<script type="text/javascript">
	myReady(function(){
        var d=document.getElementById('myDiv');
        d.style.backgroundColor="blue";
    });
</script>

在这里插入图片描述
测试onload与domReady：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试例</title>
		<style type="text/css">
			div{
				width:800px;
				height:200px;
				border:2px solid black;
				background-color:red;
			}
		</style>
		<script src="domReady.js"></script>
		<script type="text/javascript"> 
			myReady(function(){
                var d=document.getElementById('myDiv');
                d.innerHTML+="DOM已加载！<br>";
                time1=new Date().getTime();
                d.innerHTML += "时间戳："+time1+"<br>";
            });
            window.onload=function(){
                var d=document.getElementById('myDiv');
                d.innerHTML += "onload已加载！<br>";
                time2=new Date().getTime();
                d.innerHTML += "时间戳："+time2+"<br>";
                d.innerHTML += "domReady比onload快："+(time2-time1)+"ms<br>";
            };
		</script>
	</head>
	<body>
		<div id="myDiv"></div>
        <div>
            <img src="img/12.jpg" />  
            <img src="img/13.jpg" />
            <img src="img/14.jpg" />
            <img src="img/15.jpg" />
            <img src="img/16.jpg" />
            <img src="img/17.jpg" />        
        </div>
	</body>
</html>

在这里插入图片描述

Olivia0319
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
domReady的实现案例
09-01
相比`window.onload`事件，`domReady`的优势在于它不需要等待所有资源（如图片）加载完毕，因此可以更快地执行代码，提高用户体验。`onload`事件则会在整个页面包括所有资源加载完成后触发。 `onreadystatechange`...
JS DOMReady事件的六种实现方法总结
10-21
- 在包含iframe的页面中，使用`document.write`和`defer`的方式可能会等到iframe内容加载完后才触发事件，与`onload`事件无异。 - Webkit新版本支持`DOMContentLoaded`事件，所以这部分代码可以优化。 2. **...
简述domready和onload事件的区别？图片的onload和domready和页面onload的先后顺序，并简述原因。
weixin_43886986的博客
03-07 296
dom操作分为几步，1.解析html结构 2.解析外部脚本和内联样式 3. 解析并执行脚本 4.构建dom树 5.加载外部图片等资源 6.页面加载完毕 domready就是在图片加载前，也就是第四步的时候调用，此时就可以修改页面的长宽，onload是在第五步执行的，这就是具体区别 由此可见三者执行顺序为：domready→图片load→页面load。 domready和onload事件区别; 前者：在DOM文档结构准备完毕后就可以对DOM进行操作；后者：整个document文档（包括图片等加载信息)加载完成
domReady和onload
ktutu的博客
12-03 438
domReady和onload
OnLoad与DOMReady解析
qq_25643011的博客
03-06 367
    通常情况下我们会将JS代码书写在window.onload（）事件中；因为当onload事件发生后，初始化界面已经渲染完成，此时操作dom不会出现获取不到界面元素的情况。但这种方式有一个问题，假如界面中有一个图片瀑布流，那么只能等到图片加载完成才会触发onload事件。这段期间，用户显然无法操作界面，这是不可取的。实际上，操作dom并不需要加载完成所有的东西，例如img标签，不是等到图片加...
简述domready和onload事件的区别
马小兜要努力呀
09-12 1014
58同城笔试题 简述domready和onload事件的区别？图片的onload和domready和页面onload的先后顺序，并简述原因。、 Dom文档加载的步骤： 解析html结构 加载外部脚本和样式表文件 解析并执行脚本 dom树构建完成 加载图片等外部文件 页面加载完毕 DOM ready、页面 Load、图片Load DOM ready是在第四步完成之后触发 图片 Load是在第五步完成之后触发 页面Load是在第六步完成之后触发 由此可见三者执行顺序是DOM ready->图片 L
OnLoad & DOMReady
weixin_30314813的博客
08-18 62
window.onload 事件会在页面或图像加载完成后立即触发（即所有元素的资源都下载完毕）。如果页面上有许多图片、音乐或falsh，onload事件会迟迟无法触发。所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发。 DOMContentLoaded 事件在许多Webkit浏览器以及IE9上都可以使用, 此事件会在DOM文档准备好以后触发, ...
onload 和 domready
weixin_30654583的博客
10-12 64
博客地址：https://ainyi.com/46 window.onload 事件会在页面或图像加载完成后触发（即所有元素的资源都下载完毕）如果页面上有许多图片、音乐或 falsh 还没加载完成，onload 事件就会迟迟无法触发 所以出现了DOM Ready事件 熟悉 jQuery的人，都知道 DomReady 事件 $(document).ready(fu...
jquery如何实现domReady和onload判断的
weixin_30600197的博客
10-15 79
function ready(fn) { var completed = function() { if ( document.addEventListener ) { document.removeEventListener( "DOMContentLoaded", completed, false ); w...
window.onload和DOMReady
acm765152844的博客
02-21 449
JS的加载，是浏览器下载到哪里就执行到哪里，这种特性会导致整个项目没有一个明显的程序入口。 为了解决这个问题，我们需要对代码功能进行划分。JS分成两部分：框架和具体的功能实现。框架部分包括：定义全局变量，命名空间等，和具体功能无关，每个页面都需要加载相同的框架，每个页面都需要加载包括相同的框架。 按照编码习惯，将初始化的工作放在init函数中，他便是网页的程序入口。 JS代码中会出现这样一种
js 中 onload与DOMReady方法区别
stone_yy的专栏
10-12 161
onload 要等页面中的所有内容都更新后才执行，含图片、falsh等。 DOMReady 是在所有dom节点生成后就执行。目前jquery等框架提供这样的实现，当然也可以自己写一套方法了。 :D ...
domready:domReady 的 Shim 存储库
07-13
**标签解析：** "JavaScript" 标签明确了这个库是用 JavaScript 编写的，因此它适用于 web 开发中的客户端脚本，主要与浏览器环境交互。 **压缩包子文件列表解析：** "domready-master" 可能是指这个压缩包包含的是...
前端项目-domready.zip
09-02
6. **测试与调试**：为了保证DOMReady功能的正确性和稳定性，项目可能包含了单元测试和集成测试，使用工具如Jest或Mocha进行自动化测试。同时，可能还会有相应的日志记录和错误处理机制，方便开发过程中的调试。 总...
守望先锋资讯小程序(源码).zip
07-28
守望先锋资讯小程序(源码).zip
无人智能化关键技术及其在火炮系统中的应用_常建龙.caj
07-28
无人智能化关键技术及其在火炮系统中的应用_常建龙
本科设计-机器学习识别图片验证码-可执行内含文档代码-可执行内含文档代码.zip
07-28
本科设计-机器学习识别图片验证码-可执行内含文档代码-可执行内含文档代码.zip
【2023】智能网联汽车数据安全合规白皮书-路特斯科技&普华永道_43页.pdf
07-28
【2023】智能网联汽车数据安全合规白皮书-路特斯科技&普华永道_43页.pdf
一种无人机起落一体的四足机器人.pdf
最新发布
07-28
一种无人机起落一体的四足机器人
一种十二自由度仿生四足机器人.pdf
07-28
一种十二自由度仿生四足机器人
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值