亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

window.onload的疑問?

window.onload的疑問?

啊啊啊啊123 2017-02-08 15:46:22
<!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 反對 回復 2017-02-08
  • 啊啊啊啊123
    啊啊啊啊123
    js放到最后不是相當于html里的加載完畢再執行js里的嗎
  • Caballarii
    Caballarii
    img標簽會加載,但標簽里的圖片是異步加載的,js執行的時候并沒有加載完,如果在chrome里,你可以明顯看到圖片是從上到下慢慢加載完成的,就是圖片加載的過程。 所以把獲取圖片寬度的代碼放到img的onload里才能拿到正確的高度
  • 啊啊啊啊123
    啊啊啊啊123
    那為了不出現這種情況,js文件不論放前方后不都要寫onload?
點擊展開后面1
?
留白未來

TA貢獻2條經驗 獲得超1個贊

這問題你得分清兩個問題,一個是DOM加載完成和一個是頁面元素加載完成.

順序執行這一點你是明白的,所以考慮到把JS放在了后面.但代碼執行的順序中,它只是按逐序去讀取標簽,而不會等待標簽內的元素是否加載完成.用圖片來舉例,從上到下執行到img的時候,它讀到img標簽后發送一個獲取圖片的動作后就懶得再管了,它不會管圖片是否加載完成,它會直接去讀下一個標簽.

因為標簽讀取的幾乎就是一瞬間,所以很快就讀到了下面的JS段并開始執行JS代碼,而這個時候img中的圖片還沒顯示完成.

所以就出現了一個問題,JS代碼中需要獲取的那個img,是有的,但如果JS要獲取的是圖片屬性,圖片都沒加載完,去哪找屬性?

所以,此時JS是得不到IMG的offsetWidth的. ? 而且從這段代碼來講,獲取offsetWidth;只執行了一次,除非撞大運,緩存里有這張圖,否則就根本獲取不了.

所以才要加上window.onload(),這是告訴瀏覽器,這段JS不要急著執行,等你把所有頁面元素(包括圖片)都加載完成了之后,我再執行.這個時候獲取offsetWidth就沒問題了.

查看完整回答
1 反對 回復 2017-02-09
?
KevenHuang

TA貢獻280條經驗 獲得超233個贊

都沒有問題,都是打印0,我在本地測試過了。

查看完整回答
1 反對 回復 2017-02-08
  • 啊啊啊啊123
    啊啊啊啊123
    你把js放到這里面window.onload = function () {}還是0 ?
  • KevenHuang
    KevenHuang
    是的,一樣都是打印0
  • 啊啊啊啊123
    啊啊啊啊123
    我就啊 怎么可能 我的就不是0 window.onload = function () { var box = document.getElementById('box'); var imgs = box.getElementsByTagName('img'); var imgWidth = imgs[0].offsetWidth; console.log(imgWidth); }
點擊展開后面2
?
牛奶老哥哥

TA貢獻204條經驗 獲得超92個贊

只能說還沒完全渲染完頁面吧,元素是都獲取到了,比如讓你在樣式標簽那給圖片設置width,最后是可以console出來寬度的,這種渲染機制問題不用太深入了...望采納

查看完整回答
反對 回復 2017-02-08
  • 4 回答
  • 0 關注
  • 2343 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號