擊右上方紅色按鈕關(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è),避免用戶上傳不符合要求的圖片。
想象一下,你正在開發(fā)一個(gè)用戶頭像上傳的功能。我們希望用戶上傳的頭像不能超過(guò)100x100像素,這樣可以確保頭像在頁(yè)面上顯示得清晰又美觀。那我們?cè)撛趺磳?shí)現(xiàn)呢?
不用擔(dān)心,JavaScript提供了非常方便的FileReader和Image對(duì)象,可以幫助我們輕松實(shí)現(xiàn)這個(gè)功能。具體步驟如下:
我們來(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("圖片上傳成功!");
}
};
};
});
通過(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編碼了。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。