今天写一个简单的代码段,目的是获取图片的尺寸,顺便想复习一下原生js获取元素宽高的几种用法:
<img src="./1.jpg"/>
<script>
var img=document.getElementsByTagName('img')
var width=img.width
console.log(width)
</script>
打开页面之后,却发现控制台输出的宽度为0。。。然后我以为是方法用错了,又用了offsetWidth clientWidth scrollWidth
仍然输出为0。于是在网上查了一些资料,有网友推荐使用window.onload
方法,果然解决了问题,对此感到不明白,继续搜索,然后又了解到在图片还未完全加载之前,图片标签的默认尺寸均为0。接着使用谷歌开发者工具查看了一下Network,发现js在图片资源获取之前就已经执行了。
于是,个人猜想,在浏览器解析html文件的时候,先遍历一遍源码,构建DOM树,由于js脚本文件是内联动态脚本,会立即执行,而图片资源这种外部资源加载会在内联js之后,导致内联js获取到的是图片还未加载时图片标签默认尺寸为0的状态下的值
。解决方法就是使用window.onload或者将js脚本作为js外部文件引入
<img src="./1.jpg"/>
<script src="1.js"></script>