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

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

在瀏覽器未加載圖片之前獲取圖片寬高?

在瀏覽器未加載圖片之前獲取圖片寬高?

小唯快跑啊 2018-09-19 10:10:10
問題:1、如果瀏覽器還沒有加載的圖片,是不是沒有方法在加載之前獲取其寬高?2、js腳本按順序執行,但當有dom添加刪除等操作的時候,其加載、渲染的操作是不是采用異步執行的?問題場景:嘗試在瀏覽器還沒有渲染圖片之前在腳本中獲得它的寬高:var img = new Image(); img.src = 'images/1.jpg'; console.log(img.width,img.height);此時會打印的會是:0 0;但當我的頁面中已經使用過該圖片并且已經渲染在頁面上的時候,以上代碼就會打印圖片原本的寬高。于是我嘗試著新建圖片元素后加到文檔中,然后再獲取其寬高:var newImg = document.createElement('img');newImg.src = 'images/1.jpg'; document.body.appendChild(newImg); console.log(newImg.width,newImg.height);打印還是:0 0;只有等到其真正完成了圖片的渲染操作后才可以正確的打印,所以當我把打印的操作使用setTimeout延時打印的時候就可以正確的得到其寬高。
查看完整描述

1 回答

?
繁花不似錦

TA貢獻1851條經驗 獲得超4個贊

回答:

  1. 不是

另外我的看法:

  1. 用 setTimeout 延時獲取到圖片的尺寸雖然成功了, 但這前提是, 延時代碼執行的時候, 瀏覽器已加載完畢圖片;

  2. 正確的姿勢如 @浴火小青春 所言, 是在 img 的 load 事件結束時(后)再獲取其尺寸. 這個回調你可以用 onload 屬性來做, 也可以用 addEventListener 來做;

  3. 圖片就算不在 DOM 里也可能被瀏覽器加載, 至少我用 Chrome 實例一個 Image 對象并賦值給其 src 屬性后, 瀏覽器就請求了這張圖片;

  4. 提前從服務端那里拿到圖片的尺寸, 就沒這么折騰了.


查看完整回答
反對 回復 2018-10-15
  • 1 回答
  • 0 關注
  • 1264 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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