本文分享多種js獲取圖片寬高的方法，并且通過實(shí)例進(jìn)行分析，希望大家從中有所收獲 。
一、簡陋的獲取圖片方式
結(jié)果如下：
寬高都是0的這個結(jié)果很正常，因?yàn)閳D片的相關(guān)數(shù)據(jù)都沒有被加載前它的寬高默認(rèn)就是0 于是可以這么優(yōu)化!
【js獲取圖片寬高的方法】二、onload后在打印
結(jié)果如下
通過onload就能獲取到圖片的寬高了 。但onload大一點(diǎn)的圖通常都比較慢，不實(shí)用，但只要圖片被瀏覽器緩存，那么圖片加載幾乎就不用等待即可觸發(fā)onload，我們要的是占位符 。所以有些人通過緩存獲取也可以這么寫 。
三、通過complete與onload一起混合使用
為了測試緩存效果，注意以下測試圖片的url都不加時間戳
第一次執(zhí)行，永遠(yuǎn)是onload觸發(fā)
你再刷新，幾乎都是緩存觸發(fā)了
從緩存里讀取圖片的寬高不用說，非常方便快捷，今天我們要解決的是沒有緩存而又快速的相比onload更快的方式去獲取圖片的寬高 。我們常常知道有些圖片雖然沒有完全down下來，但是已經(jīng)先有占位符，然后一點(diǎn)一點(diǎn)的加載 。既然有占位符那應(yīng)該是請求圖片資源服務(wù)器響應(yīng)后返回的 ?？煞?wù)器什么時候響應(yīng)并返回寬高的數(shù)據(jù)沒有觸發(fā)事件，比如onload事件 。于是催生了第四種方法
四、通過定時循環(huán)檢測獲取
看看以下例子，為了避免從緩存里讀取數(shù)據(jù)，每一次請求都帶時間戳：
FireFox
IE7 8 9 10
Chrome
通過以上測試，我們發(fā)現(xiàn)定時檢測圖片寬高的方式要比onload快多了，打印的行數(shù)越多表示onload時間越長，40毫秒執(zhí)行一次，基本100毫秒內(nèi)就能獲取圖片的寬高，chrome甚至在第一次循環(huán)的時候就已經(jīng)獲得數(shù)據(jù) 。從以上數(shù)據(jù)來分析，其實(shí)我們可以在定時函數(shù)里判斷只要圖片的寬高都大于0就表示已經(jīng)獲得正確的圖片寬高 。我們把時間打上，來看看通過定時獲取寬高或者onload獲取寬高所需要多少時間 。
推薦閱讀
- ps把字去掉不傷背景教程
- cad如何轉(zhuǎn)換成圖片
- 電腦打印圖片方法
- cad導(dǎo)入圖片怎么調(diào)整透明度的方法
- ps把兩張圖片融合在一起教程
- win10打開圖片需要新應(yīng)用打開此ms-gaming解決方法
- 圖片大小怎么改到300k
- JavaScript獲取瀏覽器信息的方法
- jQuery實(shí)現(xiàn)圖片上傳和裁剪插件Croppie
- 蘋果14手機(jī)圖片及價格-蘋果14什么時候上市圖片及價格