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