整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          JavaScript如何更優(yōu)雅的斷定圖片資源已加載完

          JavaScript如何更優(yōu)雅的斷定圖片資源已加載完成

          擊右上方紅色按鈕關(guān)注“小鄭搞碼事”,每天都能學(xué)到知識(shí),搞懂一個(gè)問(wèn)題!

          在H5的頁(yè)面中,我們經(jīng)常會(huì)看到開頭有一個(gè)loading的效果,這個(gè)loading的時(shí)間內(nèi)就是在加載圖片資源,以便后續(xù)滑屏效果更流暢。那么JS如何來(lái)判斷圖片資源已加載完成呢?且如何能更優(yōu)雅的寫斷定代碼。

          首先,提一下兩個(gè)事件:jquery中有一個(gè)ready和window.onload的區(qū)別。ready只是dom結(jié)構(gòu)加載完成,圖片并沒(méi)有加載完畢,而onload是dom生成和資源完全加載出來(lái)后才執(zhí)行,這里也就包括圖片已加載。

          所以,基本這點(diǎn),接下來(lái)我們來(lái)看一下JS是如何斷定單圖和多圖加載完成的。

          考慮兼容

          IE8下版本不支持onload事件,但支持onreadystatechange事件,readyState是onreadystatechange事件的一個(gè)狀態(tài),值為loaded或complete的時(shí)候,表示已經(jīng)加載完畢。代碼如下所示:

          不考慮兼容

          在不考慮兼容的情況下,使用onload事件就足夠了,下面分單圖和多圖及結(jié)合promise來(lái)給出代碼。

          1. 單圖(onload)

          2. 單圖(+promise)

          3. 多圖(onload)

          4. 多圖(+promise)

          家好,今天我們來(lái)聊聊一個(gè)非常實(shí)用的小技巧——如何用JavaScript檢測(cè)用戶上傳的圖片的寬度和高度。這在我們開發(fā)中非常常見,比如說(shuō),我們要限制用戶上傳頭像的尺寸,或者是對(duì)商品圖片進(jìn)行尺寸檢查。這些場(chǎng)景都要求我們?cè)谇岸司湍芨愣▓D片尺寸的檢測(cè),避免用戶上傳不符合要求的圖片。

          業(yè)務(wù)需求:用戶頭像上傳

          想象一下,你正在開發(fā)一個(gè)用戶頭像上傳的功能。我們希望用戶上傳的頭像不能超過(guò)100x100像素,這樣可以確保頭像在頁(yè)面上顯示得清晰又美觀。那我們?cè)撛趺磳?shí)現(xiàn)呢?

          解決方案:FileReader和Image對(duì)象

          不用擔(dān)心,JavaScript提供了非常方便的FileReader和Image對(duì)象,可以幫助我們輕松實(shí)現(xiàn)這個(gè)功能。具體步驟如下:

          1. 獲取文件輸入框:首先,我們需要獲取到用戶選擇的文件。
          2. 讀取文件內(nèi)容:然后,通過(guò)FileReader對(duì)象讀取文件內(nèi)容。
          3. 創(chuàng)建圖片對(duì)象:接下來(lái),用Image對(duì)象加載讀取到的文件。
          4. 檢測(cè)圖片尺寸:最后,通過(guò)Image對(duì)象獲取圖片的寬度和高度,并進(jìn)行判斷。

          實(shí)現(xiàn)代碼

          我們來(lái)看看具體的實(shí)現(xiàn)代碼:

          const fileUpload=document.querySelector('input[type="file"]');
          const reader=new FileReader();
          
          fileUpload.addEventListener('change', ()=> {
            reader.readAsDataURL(fileUpload.files[0]);
            reader.onload=(e)=> {
              const image=new Image();
              image.src=e.target.result;
              image.onload=()=> {
                const { height, width }=image;
                if (height > 100 || width > 100) {
                  alert("上傳的圖片尺寸過(guò)大,請(qǐng)選擇100x100像素以內(nèi)的圖片。");
                } else {
                  alert("圖片上傳成功!");
                }
              };
            };
          });

          代碼解析

          1. 獲取文件輸入框:document.querySelector('input[type="file"]')選擇了頁(yè)面上的文件輸入框。
          2. 創(chuàng)建FileReader實(shí)例:通過(guò)new FileReader()創(chuàng)建了一個(gè)FileReader對(duì)象。
          3. 添加事件監(jiān)聽器:fileUpload.addEventListener('change', ()=> { ... })監(jiān)聽文件輸入框的變化事件,當(dāng)用戶選擇文件時(shí)觸發(fā)。
          4. 讀取文件內(nèi)容:reader.readAsDataURL(fileUpload.files[0])讀取用戶選擇的文件,并轉(zhuǎn)換為Data URL格式。
          5. 創(chuàng)建Image對(duì)象:在FileReader讀取完成后,通過(guò)new Image()創(chuàng)建一個(gè)圖片對(duì)象,并將其src屬性設(shè)置為讀取到的文件內(nèi)容。
          6. 檢測(cè)圖片尺寸:當(dāng)圖片加載完成后,通過(guò)image.onload事件獲取圖片的寬度和高度,并進(jìn)行尺寸判斷。

          結(jié)束

          通過(guò)以上步驟,我們可以輕松實(shí)現(xiàn)對(duì)用戶上傳圖片尺寸的檢測(cè)。這不僅提高了用戶體驗(yàn),還能確保上傳的圖片符合我們的要求。希望這個(gè)小技巧能對(duì)你有所幫助,趕緊在你的項(xiàng)目中試試吧!

          先安裝的依賴

          npm install file-loader --save-dev
          npm install image-webpack-loader --save-dev
          npm install url-loader --save-dev

          在webpack.config.js文件中加入如下配置

          在css文件中引入該圖片作為背景圖片。

          運(yùn)行npm run start

          打開瀏覽器http://localhost:8080/

          看到圖片已經(jīng)引入進(jìn)來(lái)而且命名經(jīng)過(guò)了哈希處理。

          看下url-loader是什么樣子的,同樣修改webpack.config.js文件

          意思是小于10K的轉(zhuǎn)為base64,大于10K的還是原圖片。

          直接運(yùn)行npm run start

          圖片已經(jīng)轉(zhuǎn)化為base64編碼了。


          主站蜘蛛池模板: 福利片福利一区二区三区| 精品女同一区二区三区免费播放 | 亚洲色欲一区二区三区在线观看| 日本丰满少妇一区二区三区 | 国精品无码A区一区二区| 乱人伦一区二区三区| 亚洲日韩精品无码一区二区三区 | 国产精品亚洲不卡一区二区三区 | 国产精品制服丝袜一区| 在线精品一区二区三区电影| 一区二区三区日本视频| 亚洲熟妇av一区二区三区| 亚洲欧洲日韩国产一区二区三区| 国产一区二区精品久久91| 亚洲AV无码一区东京热| 国产精品视频免费一区二区| 中文字幕一区在线| 中文乱码字幕高清一区二区| 国产精品无码一区二区在线观一| 亚洲一区二区三区在线网站| 一区二区三区四区无限乱码 | 曰韩人妻无码一区二区三区综合部| 精品无码成人片一区二区| 日韩国产精品无码一区二区三区| 精品无码国产AV一区二区三区| 久久精品免费一区二区三区 | 亚洲视频一区在线播放| 一区二区三区国模大胆| 无码一区18禁3D| 无码少妇一区二区性色AV| 日韩一区二区三区视频久久| 亚洲中文字幕在线无码一区二区| 国产AⅤ精品一区二区三区久久| 精品国产一区二区三区无码| 内射女校花一区二区三区| 国产伦精品一区二区三区免.费 | 一区在线免费观看| 国产精品美女一区二区三区| 无码人妻久久久一区二区三区| 亚洲一区无码精品色| 人妻互换精品一区二区|