預加載：提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染。
懶加載：懶加載的主要目的是作為服務器前端的優化，減少請求數或延遲請求數。
兩種技術的本質：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。
懶加載對服務器前端有一定的緩解壓力作用，預加載 則會增加服務器前端壓力。
懶加載：
img的data-src屬性及懶加載：當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需要請求一次），當圖片出現在瀏覽器的可視區域內時，才設置圖片真正的路徑，讓圖片顯示出來。這就是圖片懶加載。
通俗一點：
1、就是創建一個自定義屬性data-src存放真正需要顯示的圖片路徑，而img自帶的src放一張為1*1px的圖片路徑。
2、當頁面滾動直至此圖片出現在可視區域時，用js取到該圖片的data-src的值賦給src。
ps:自定義屬性可以去任何名字
場景：對於圖片過多的頁面，為了加快頁面加載速度，需要將頁面內未出現的可視區域內的圖片先不做加載，等到滾動可視區域后再去加載。
原理：img標簽的src屬性用來表示圖片的URL，當這個屬性值不為空時，瀏覽器就會根據這個值發送請求，如果沒有src屬性就不會發送請求。所以，在頁面 加入時將img標簽的src指向為空或者指向一個小圖片（loading或者缺省圖），將真實地址存在一個自定義屬性data-src中，當頁面滾動時，將可視區域的圖片的src值賦為真實的值。
參考：https://www.cnblogs.com/moxiaowohuwei/p/7908877.html
預加載：
簡單理解：就是在使用該圖片資源前，先加載到本地來，真正到使用時，直接從本地請求數據就行了。
var arr = [ '../picture/1.jpg', '../picture/2.jpg', '../picture/3.jpg', ]; var imgs =[] preLoadImg(arr); //圖片預加載方法 function preLoadImg(pars){ for(let i=0;i<arr.length;i++){ imgs[i] = new Image(); imgs[i].src = arr[i]; } }
可以看到圖片已經加載完畢了，到本地了
現在在頁面放一個img標簽
<body> <img src="" alt="" id="pic"/> //存放圖片路徑的地址 <script> var arr = [ '../picture/1.jpg', '../picture/2.jpg', '../picture/3.jpg', ]; var imgs =[] preLoadImg(arr); //圖片預加載方法 function preLoadImg(pars){ for(let i=0;i<arr.length;i++){ imgs[i] = new Image(); imgs[i].src = arr[i]; } } // 5s之后顯示出該圖片 setInterval(function(){ var pic = document.querySelector('#pic'); pic.src = '../picture/1.jpg' },5000); </script>
5s之后並沒有重復請求1.jpg這個圖片，因為之前已經請求下來了，這就是預加載
參考：https://blog.51cto.com/11871779/2404689