JS獲取圖片高度寬度的方法分享
一般獲取圖片高度寬度的寫法：
var img = new Image();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);
但chrome中測試 無法獲取到。img.width, img.height都為0
原因:當(dāng)圖片不是本地圖片,而是網(wǎng)絡(luò)圖片
onload 在成功地裝載了圖像時(shí)調(diào)用的事件處理程序。
在做web開發(fā)，其中有一個(gè)需求：利用Javascript獲取要加載的圖片的尺寸，所以很自然的，想到了img的onload方法，在firefox下開發(fā)完成后，到IE下調(diào)試，發(fā)現(xiàn)img的onload事件很多情況下都不被調(diào)用。
最初的代碼如下：
var img = new Image;
img.src = "test.gif";
img.onload = function(){
alert ( img.width );
};
這段代碼看著沒什么問題，但是為什么onload沒有被IE調(diào)用呢？因?yàn)镮E會(huì)緩存圖片，第2次加載的圖片，不是從服務(wù)器上傳過來的，而是從緩沖區(qū)里加載的。是不是從緩沖區(qū)里加載的圖片就不觸發(fā)onload事件呢？我于是我測試了以下代碼，成功了～
var img = new Image;
img.onload = function(){
alert ( img.width ); };
img.src = "test.gif";
把onload寫到前面去，先告訴瀏覽器如何處理這張圖片，再指定這張圖片的源，這樣就正常了。所以，不是IE沒有觸發(fā)onload事件，而是因?yàn)榧虞d緩沖區(qū)的速度太快，以至于沒有運(yùn)行到img.onload的時(shí)候，onload事件已經(jīng)觸發(fā)了。這讓想到了Ajax，在寫xmlhttp的時(shí)候，都是先指定onstatechange的回調(diào)函數(shù)，然后再send數(shù)據(jù)的，道理是一樣的
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版
這篇文章主要為大家詳細(xì)介紹了Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版，結(jié)合導(dǎo)航條和下拉菜單進(jìn)行改進(jìn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
three.js實(shí)現(xiàn)圍繞某物體旋轉(zhuǎn)
本篇文章主要介紹了three.js實(shí)現(xiàn)圍繞某物體旋轉(zhuǎn)的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
使用FormData實(shí)現(xiàn)上傳多個(gè)文件
這篇文章主要為大家詳細(xì)介紹了使用FormData實(shí)現(xiàn)上傳多個(gè)文件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了JavaScript?element的Form表單生成方式,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)
這篇文章主要介紹了ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
微信小程序是一種全新的連接用戶與服務(wù)的方式，下面這篇文章主要給大家介紹了關(guān)于加快微信小程序開發(fā)的一些小建議，需要的朋友可以參考下2021-05-05
微信小程序?qū)崿F(xiàn)YDUI的ScrollNav組件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollNav組件，滾動(dòng)導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
移動(dòng)端翻頁插件dropload.js（支持Zepto和jQuery）
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端翻頁插件dropload.js，支持Zepto和jQuery，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
兼容IE和Firefox火狐的上下、左右循環(huán)無間斷滾動(dòng)JS代碼
html里的marqueen也能實(shí)現(xiàn)內(nèi)容的滾動(dòng)，但滾動(dòng)是間斷的，運(yùn)用JavaScript可以使這一問題得到改觀，實(shí)現(xiàn)無間斷的滾動(dòng),讓頁面看起來更美觀2013-04-04
踩了很多次坑,終于在微信小程序中搞定了圖片上傳以及內(nèi)容安全審核,下面這篇文章主要給大家介紹了關(guān)于微信小程序圖片上傳以及內(nèi)容安全審核的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04