错乱变装wordpress,徐州网站建设优化宣传,企业展厅方案,seo优化排名网一、文档加载监听
#xff08;1#xff09;抛出疑惑#xff0c;什么是文档加载监听#xff1f;为什么要有这个东西#xff1f;
老样子#xff0c;我们先讲一个场景#xff0c;带着大家熟悉为什么会有文档加载监听#xff0c;是来解决什么问题来着的。
我们先看下这段…一、文档加载监听
1抛出疑惑什么是文档加载监听为什么要有这个东西
老样子我们先讲一个场景带着大家熟悉为什么会有文档加载监听是来解决什么问题来着的。
我们先看下这段代码~
下面这段代码是不是我们可以将boxEl这个元素设置背景为红色
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;}/style
/headbodydiv classbox/divscriptvar boxEl document.querySelector(.box)boxEl.style.backgroundColor red/script/body/html 我们看下效果很明显可以。 我们再把代码位置换一下这个时候可以设置背景成功吗
答很明显不行因为执行js代码里的时候还找不到boxEl元素还没加载。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;}/style
/headbodyscriptvar boxEl document.querySelector(.box)boxEl.style.backgroundColor red/scriptdiv classbox/div/body/html 可以解决这个问题吗答当然可以我们只需要将这行代码执行完就可以了。 div classbox/div换句话来说我们只需要把js里面的设置背景相关的代码写一个事件监听。 2文档加载监听 onload
当我们这样子写的时候function里面的代码不会立即执行只有等浏览器把全部加载完成过后才会回调这个函数。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;}/style
/headbodyscript// 注册事件监听window.onload function () {var boxEl document.querySelector(.box)boxEl.style.backgroundColor red}/scriptdiv classbox/div/body/html 3DOMContentLoaded事件
DOMContentLoaded事件是在Web开发中经常使用的事件它表示当文档的主体内容已经被完全加载并解析完成但可能还包含一些外部资源如图片、样式表或脚本的异步加载。简单来说当浏览器完成了HTML标签的解析并认为页面的主要结构已经就绪时DOMContentLoaded事件就会触发。
这个事件对于JavaScript开发者很重要因为它意味着他们可以在DOM树准备就绪之后立即开始操作DOM元素而不需要等待所有内容下载完毕。这意味着可以避免阻塞用户界面提升用户体验。例如你可以在这时候执行某些初始化逻辑或者开始动画效果。 所以如下代码中img本身是内容的一部分但是img中src指向的图片地址就不是属于内容的一部分。为什么这是浏览器指定的哈记住就好 不用过多纠结
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;}/style
/headbodyscript// 注册事件监听window.addEventListener(DOMContentLoaded, function () {// 1. 这里可以操作box,box已经加载完毕var boxEl document.querySelector(.box)boxEl.style.backgroundColor redconsole.log(HTML内容加载完毕);})window.onload function () {// var boxEl document.querySelector(.box)// boxEl.style.backgroundColor red// console.log(文档中所有资源都加载完毕);}/scriptdiv classboxp哈哈哈哈/p/diva href#百度一下/aimg src../images/dog.jpg alt/body/html 4window.onload 和 DOMContentLoaded区别
所以从上面2、3点可以得出结论了吧我们总结一下。
DOMContendLoaded浏览器已完全加载HTML并构建了DOM树但像img和样式表之类的外部资源可能尚未加载完成。img本身是内容的一部分但是img中src指向的图片地址就不是属于内容的一部分。为什么这是浏览器指定的哈记住就好 不用过多纠结load浏览器不仅加载完成了HTML还加载完成了所有外部资源图片样式等。 5验证区别
我在window.addEventListener监听的时候为什么打印不出来img图片占据的宽度和高度
因为我在img元素里压根没跟他设置styleXXXX img src../images/dog.jpg altimg src../images/dog.jpg alt stylewidth:200px;height:200px!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;}/style
/headbodyscript// 注册事件监听window.addEventListener(DOMContentLoaded, function () {// 1. 这里可以操作box,box已经加载完毕// var boxEl document.querySelector(.box)// boxEl.style.backgroundColor red// console.log(HTML内容加载完毕);// 2. 获取img对应图片的宽度和高度var imgEl document.querySelector(img)console.log(图片的宽度和高度, imgEl.style.width, imgEl.style.height);})window.onload function () {// var boxEl document.querySelector(.box)// boxEl.style.backgroundColor redconsole.log(文档中所有资源都加载完毕);}/scriptdiv classboxp哈哈哈哈/p/diva href#百度一下/aimg src../images/dog.jpg alt/body/html 那我们该怎么拿img图片所占据的空间用 offsetWidth offsetHeight
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;}/style
/headbodyscript// 注册事件监听window.addEventListener(DOMContentLoaded, function () {// 1. 这里可以操作box,box已经加载完毕// var boxEl document.querySelector(.box)// boxEl.style.backgroundColor red// console.log(HTML内容加载完毕);// 2. 获取img对应图片的宽度和高度var imgEl document.querySelector(img)// console.log(图片的宽度和高度, imgEl.style.width, imgEl.style.height);console.log(图片的宽度和高度, imgEl.offsetWidth, imgEl.offsetHeight);})window.onload function () {// var boxEl document.querySelector(.box)// boxEl.style.backgroundColor redconsole.log(文档中所有资源都加载完毕);}/scriptdiv classboxp哈哈哈哈/p/diva href#百度一下/aimg src../images/dog.jpg alt/body/html 我们看下打印结果说明什么 说明图片压根没加载出来。这个案例是不是验证了
DOMContendLoaded浏览器已完全加载HTML并构建了DOM树但像img和样式表之类的外部资源可能尚未加载完成。img本身是内容的一部分但是img中src指向的图片地址就不是属于内容的一部分。为什么这是浏览器指定的哈记住就好 不用过多纠结 那我们放到window.onload试一下看看。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;}/style
/headbodyscript// 注册事件监听window.addEventListener(DOMContentLoaded, function () {// 1. 这里可以操作box,box已经加载完毕// var boxEl document.querySelector(.box)// boxEl.style.backgroundColor red// console.log(HTML内容加载完毕);// 2. 获取img对应图片的宽度和高度// var imgEl document.querySelector(img)// console.log(图片的宽度和高度, imgEl.style.width, imgEl.style.height);// console.log(图片的宽度和高度, imgEl.offsetWidth, imgEl.offsetHeight);})window.onload function () {// var boxEl document.querySelector(.box)// boxEl.style.backgroundColor redvar imgEl document.querySelector(img)console.log(文档中所有资源都加载完毕);console.log(图片的宽度和高度, imgEl.offsetWidth, imgEl.offsetHeight);}/scriptdiv classboxp哈哈哈哈/p/diva href#百度一下/aimg src../images/dog.jpg alt/body/html 打印结果如下是不是验证成功了
load浏览器不仅加载完成了HTML还加载完成了所有外部资源图片样式等。
