問題: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延時打印的時候就可以正確的得到其寬高。
在瀏覽器未加載圖片之前獲取圖片寬高?
小唯快跑啊
2018-09-19 10:10:10