整合營(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編碼了。


          主站蜘蛛池模板: 精品国产亚洲一区二区三区在线观看 | 亚洲第一区精品观看| 日韩一区二区久久久久久| 91久久精品国产免费一区| 香蕉一区二区三区观| 国产一区二区三区免费看| 夜夜精品视频一区二区| 国产99久久精品一区二区| 亚洲av无码一区二区三区乱子伦 | 99精品国产高清一区二区三区 | 精品一区二区三区波多野结衣| 国产日韩高清一区二区三区| 青娱乐国产官网极品一区| 最新中文字幕一区| 色窝窝免费一区二区三区| 国产吧一区在线视频| 日韩精品一区二区三区中文精品 | 中文字幕一区在线观看视频| 一区二区中文字幕| 亚洲制服丝袜一区二区三区 | 无码人妻aⅴ一区二区三区| 亚洲一区二区无码偷拍| 无码人妻一区二区三区免费| 日本无码一区二区三区白峰美| 日本一区二区三区不卡视频| 日美欧韩一区二去三区| 日本中文字幕在线视频一区 | 精品国产鲁一鲁一区二区| 亚洲一区二区三区免费在线观看| 人妻少妇久久中文字幕一区二区| 久久精品一区二区三区AV| 亚洲性无码一区二区三区| 精品国产福利在线观看一区| 老鸭窝毛片一区二区三区 | 亚洲av无码一区二区三区天堂| 亚洲综合激情五月色一区| 精品国产一区二区麻豆| 国产一区二区三区高清视频| 亚洲AV无码一区二区三区DV | 国产在线一区二区三区| 久久久久人妻一区精品色 |