JS快速獲取圖片寬高的方法

快速獲取圖片的寬高其實(shí)是為了預(yù)先做好排版樣式布局做準(zhǔn)備，通過(guò)快速獲取圖片寬高的方法比onload方法要節(jié)省很多時(shí)間，甚至一分鐘以上都有可能，并且這種方法適用主流瀏覽器包括IE低版本瀏覽器。

我們一步一步進(jìn)入這個(gè)過(guò)程。

一、簡(jiǎn)陋的獲取圖片方式

// 圖片地址 后面加時(shí)間戳是為了避免緩存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date());// 創(chuàng)建對(duì)象 var img = new Image();// 改變圖片的src img.src = img_url;// 打印 alert('width:'+img.width+',height:'+img.height);

?

執(zhí)行：

寬高都是0的這個(gè)結(jié)果很正常，因?yàn)閳D片的相關(guān)數(shù)據(jù)都沒(méi)有被加載前它的寬高默認(rèn)就是0

于是可以這么優(yōu)化！

二、onload后在打印

// 圖片地址 后面加時(shí)間戳是為了避免緩存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date());// 創(chuàng)建對(duì)象 var img = new Image();// 改變圖片的src img.src = img_url;// 加載完成執(zhí)行 img.onload = function(){// 打印alert('width:'+img.width+',height:'+img.height); };

?

執(zhí)行：

通過(guò)onload就能獲取到圖片的寬高了。但onload大一點(diǎn)的圖通常都比較慢，不實(shí)用，但只要圖片被瀏覽器緩存，那么圖片加載幾乎就不用等待即可觸發(fā)onload，我們要的是占位符。所以有些人通過(guò)緩存獲取也可以這么寫。

三、通過(guò)complete與onload一起混合使用

為了測(cè)試緩存效果，注意以下測(cè)試圖片的url都不加時(shí)間戳

// 圖片地址 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg';// 創(chuàng)建對(duì)象 var img = new Image();// 改變圖片的src img.src = img_url;// 判斷是否有緩存 if(img.complete){// 打印alert('from:complete : width:'+img.width+',height:'+img.height); }else{// 加載完成執(zhí)行img.onload = function(){// 打印alert('from:onload : width:'+img.width+',height:'+img.height);}; }

?

第一次執(zhí)行，永遠(yuǎn)是onload觸發(fā)

你再刷新，幾乎都是緩存觸發(fā)了

從緩存里讀取圖片的寬高不用說(shuō)，非常方便快捷，今天我們要解決的是沒(méi)有緩存而又快速的相比onload更快的方式去獲取圖片的寬高。我們常常知道有些圖片雖然沒(méi)有完全down下來(lái)，但是已經(jīng)先有占位符，然后一點(diǎn)一點(diǎn)的加載。既然有占位符那應(yīng)該是請(qǐng)求圖片資源服務(wù)器響應(yīng)后返回的。可服務(wù)器什么時(shí)候響應(yīng)并返回寬高的數(shù)據(jù)沒(méi)有觸發(fā)事件，比如onload事件。于是催生了第四種方法

四、通過(guò)定時(shí)循環(huán)檢測(cè)獲取

看看以下例子，為了避免從緩存里讀取數(shù)據(jù)，每一次請(qǐng)求都帶時(shí)間戳：

// 圖片地址 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date());// 創(chuàng)建對(duì)象 var img = new Image();// 改變圖片的src img.src = img_url;// 定時(shí)執(zhí)行獲取寬高 var check = function(){document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : width:'+img.width+',height:'+img.height+'</div>'; };var set = setInterval(check,40);// 加載完成獲取寬高 img.onload = function(){document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : width:'+img.width+',height:'+img.height+'</div>';// 取消定時(shí)獲取寬高 clearInterval(set); };

?

FireFox

IE7 8 9 10

Chrome

通過(guò)以上測(cè)試，我們發(fā)現(xiàn)定時(shí)檢測(cè)圖片寬高的方式要比onload快多了，打印的行數(shù)越多表示onload時(shí)間越長(zhǎng)，40毫秒執(zhí)行一次，基本100毫秒內(nèi)就能獲取圖片的寬高，chrome甚至在第一次循環(huán)的時(shí)候就已經(jīng)獲得數(shù)據(jù)。從以上數(shù)據(jù)來(lái)分析，其實(shí)我們可以在定時(shí)函數(shù)里判斷只要圖片的寬高都大于0就表示已經(jīng)獲得正確的圖片寬高。我們把時(shí)間打上，來(lái)看看通過(guò)定時(shí)獲取寬高或者onload獲取寬高所需要多少時(shí)間。

代碼：

// 記錄當(dāng)前時(shí)間戳 var start_time = new Date().getTime();// 圖片地址 var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time;// 創(chuàng)建對(duì)象 var img = new Image();// 改變圖片的src img.src = img_url;// 定時(shí)執(zhí)行獲取寬高 var check = function(){// 只要任何一方大于0// 表示已經(jīng)服務(wù)器已經(jīng)返回寬高if(img.width>0 || img.height>0){var diff = new Date().getTime() - start_time;document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : width:'+img.width+',height:'+img.height+', time:'+diff+'ms</div>';clearInterval(set);} };var set = setInterval(check,40);// 加載完成獲取寬高 img.onload = function(){var diff = new Date().getTime() - start_time;document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : width:'+img.width+',height:'+img.height+', time:'+diff+'ms</div>'; };

?

FireFox：

IE

Chrome

這是一張2560 * 1600大小的圖片，各瀏覽器執(zhí)行結(jié)果都能看到通過(guò)快速獲取圖片大小的方法幾乎都在200毫秒以內(nèi)，而onload至少五秒以上，這差別之大說(shuō)明快速獲取圖片寬高非常實(shí)用。

?

posted on 2015-06-25 10:45 jsCoder_洋洋 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/zhuyang/p/4599404.html

總結(jié)

以上是生活随笔為你收集整理的JS快速获取图片宽高的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。