整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
在H5的頁面中，我們經常會看到開頭有一個loading的效果，這個loading的時間內就是在加載圖片資源，以便后續滑屏效果更流暢。那么JS如何來判斷圖片資源已加載完成呢？且如何能更優雅的寫斷定代碼。
首先，提一下兩個事件：jquery中有一個ready和window.onload的區別。ready只是dom結構加載完成，圖片并沒有加載完畢，而onload是dom生成和資源完全加載出來后才執行，這里也就包括圖片已加載。
所以，基本這點，接下來我們來看一下JS是如何斷定單圖和多圖加載完成的。
IE8下版本不支持onload事件，但支持onreadystatechange事件，readyState是onreadystatechange事件的一個狀態，值為loaded或complete的時候，表示已經加載完畢。代碼如下所示：
在不考慮兼容的情況下，使用onload事件就足夠了，下面分單圖和多圖及結合promise來給出代碼。
1. 單圖（onload）
2. 單圖（+promise）
3. 多圖（onload）
4. 多圖（+promise）
家好，今天我們來聊聊一個非常實用的小技巧——如何用JavaScript檢測用戶上傳的圖片的寬度和高度。這在我們開發中非常常見，比如說，我們要限制用戶上傳頭像的尺寸，或者是對商品圖片進行尺寸檢查。這些場景都要求我們在前端就能搞定圖片尺寸的檢測，避免用戶上傳不符合要求的圖片。
想象一下，你正在開發一個用戶頭像上傳的功能。我們希望用戶上傳的頭像不能超過100x100像素，這樣可以確保頭像在頁面上顯示得清晰又美觀。那我們該怎么實現呢？
不用擔心，JavaScript提供了非常方便的FileReader和Image對象，可以幫助我們輕松實現這個功能。具體步驟如下：
我們來看看具體的實現代碼：
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("上傳的圖片尺寸過大，請選擇100x100像素以內的圖片。");
} else {
alert("圖片上傳成功！");
}
};
};
});通過以上步驟，我們可以輕松實現對用戶上傳圖片尺寸的檢測。這不僅提高了用戶體驗，還能確保上傳的圖片符合我們的要求。希望這個小技巧能對你有所幫助，趕緊在你的項目中試試吧！
先安裝的依賴
npm install file-loader --save-dev npm install image-webpack-loader --save-dev npm install url-loader --save-dev
在webpack.config.js文件中加入如下配置
在css文件中引入該圖片作為背景圖片。
運行npm run start
打開瀏覽器http://localhost:8080/
看到圖片已經引入進來而且命名經過了哈希處理。
看下url-loader是什么樣子的，同樣修改webpack.config.js文件
意思是小于10K的轉為base64,大于10K的還是原圖片。
直接運行npm run start
圖片已經轉化為base64編碼了。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
