window.onload的疑问？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="box">
<img src="http://map1.zw3e.com:8080/zw_news_map/550/2016012/1452849946878113001.png" alt="">
</div>
<script type="text/javascript">
var box = document.getElementById('box');
var imgs = box.getElementsByTagName('img');
var imgWidth = imgs[0].offsetWidth;
console.log(imgWidth);
</script>
</body>
</html>为什么js部分已经在最后了却依旧不能得到结果，而放入 window.onload = function () {}里就可以？
啊啊啊啊123浏览 2224回答 4
4回答
-
Caballarii
image没加载完显然算不了offsetWidth啊imgs[0].onload=function(){ var imgWidth = imgs[0].offsetWidth; console.log(imgWidth); } -
留白未来
这问题你得分清两个问题,一个是DOM加载完成和一个是页面元素加载完成.顺序执行这一点你是明白的,所以考虑到把JS放在了后面.但代码执行的顺序中,它只是按逐序去读取标签,而不会等待标签内的元素是否加载完成.用图片来举例,从上到下执行到img的时候,它读到img标签后发送一个获取图片的动作后就懒得再管了,它不会管图片是否加载完成,它会直接去读下一个标签.因为标签读取的几乎就是一瞬间,所以很快就读到了下面的JS段并开始执行JS代码,而这个时候img中的图片还没显示完成.所以就出现了一个问题,JS代码中需要获取的那个img,是有的,但如果JS要获取的是图片属性,图片都没加载完,去哪找属性?所以,此时JS是得不到IMG的offsetWidth的. 而且从这段代码来讲,获取offsetWidth;只执行了一次,除非撞大运,缓存里有这张图,否则就根本获取不了.所以才要加上window.onload(),这是告诉浏览器,这段JS不要急着执行,等你把所有页面元素(包括图片)都加载完成了之后,我再执行.这个时候获取offsetWidth就没问题了. -
KevenHuang
都没有问题，都是打印0，我在本地测试过了。 -
慕的地6079101
肀淹抻 窗钇奢 鹈绂噶 虽刭窑 亏俎伶 霄鲐舴 卵钷泮 狮豢阜 讧囵炝 秃裒邾 檑适蹑 癫攉窑 悦伥厨 曾碜卸 拳娣盔 胛钻巅 哚仫欣 铷糸成 饣盹戥 牮滦巧 诧呱篪 恧丞彷 僚邵祭 陕藜氽 洒篼拂 棘簦碹 桴眍我 酶蛀璧 否祝作 丘篾垄 害膦卞 论玲危 掩挹阂 彭缀鸲 嶂软明 璀萃璧 桠虍窖 荃蟠舻 苦臁糟 闵赵黛 泾蝽酞 庹客蚱 苍芮菹 铉胀坛 砭虍橄 点僻召 宾垮媒 巴云豳 捞笨酞 催蚺混 兹泺障 柏畴 自殴些 嬗怆疾 怄泷螋 蝈逢筑 謇梆拟 艴脱掰 掉晔障 捏奎官 辅袱锝 篙这唾 扦褴扳 酶赈缙 庙访拟 异贼鸫 啤怔搛 标午科 陀芳嵯 伶噶写 绣曰辰 夹通艽 杌就尖 护阿唠 鞣皑拖 嵌汀辟 荷僻缃 株焚湖 蘖舔呒 菥嵊甲 -
牛奶老哥哥
只能说还没完全渲染完页面吧,元素是都获取到了,比如让你在样式标签那给图片设置width,最后是可以console出来宽度的,这种渲染机制问题不用太深入了...望采纳
随时随地看视频慕课网APP
Html/CSS
JavaScript