之前只是聽過這兩者瘫辩，并不知道如何使用，也不知道它們之間的區(qū)別。
其實(shí)現(xiàn)在看來都可以用一句話概括伐厌，懶加載是使用時(shí)再加載資源承绸，可以提升加載速度，減輕服務(wù)器壓力挣轨，提高用戶體驗(yàn)军熏；預(yù)加載是提前加載資源，對(duì)于圖片數(shù)量大的網(wǎng)站極具優(yōu)勢卷扮，保證了圖片快速展示羞迷，犧牲服務(wù)器性能去提升用戶體驗(yàn)。
接下來我們?cè)敿?xì)看一下這兩種加載方式：
1.懶加載
（1）懶加載的實(shí)現(xiàn)：懶加載就是訪問頁面時(shí)画饥，先把圖片換成1×1px的占位符衔瓮，只有圖片出現(xiàn)在瀏覽器可視區(qū)域時(shí)，設(shè)置真正的路徑抖甘，圖片正常顯示热鞍。
（2）使用懶加載的好處：有一種頁面比如電商網(wǎng)站，圖片特別多衔彻，如果一次性加載完畢薇宠，就會(huì)使用戶等待很長時(shí)間。
（3）懶加載原理：先在頁面中把所有的圖片統(tǒng)一使用一張占位圖進(jìn)行占位艰额，把路徑存在元素的“data-url”（這個(gè)名字起個(gè)自己認(rèn)識(shí)好記的就行）屬性里澄港，要用的時(shí)候就取出來，再設(shè)置柄沮。
（4）實(shí)現(xiàn)步驟：
? ? ? ? ? ? 1.不要將圖片地址放到src屬性中回梧，而是放到其它屬性(data-original)中。
? ? ? ? ? ? 2.頁面加載完成后祖搓，根據(jù)scrollTop判斷圖片是否在用戶的視野內(nèi)狱意，如果在，則將data-original屬性中的值取出存放到src屬性中拯欧。
? ? ? ? ? ? 3.在滾動(dòng)事件中重復(fù)判斷圖片是否進(jìn)入視野详囤，如果進(jìn)入，則將data-original屬性中的值取出存放到src屬性中镐作。
2.預(yù)加載
(1)預(yù)加載就是提前加載圖片藏姐，用戶查看時(shí)可直接從本地緩沖中渲染。
(2)使用預(yù)加載的好處：對(duì)圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來說十分有利该贾，它保證了圖片快速羔杨、無縫地發(fā)布，也可幫助用戶在瀏覽你網(wǎng)站內(nèi)容時(shí)獲得更好的用戶體驗(yàn)靶庙。
(3)實(shí)現(xiàn)預(yù)加載的方法：詳見
方法一：用CSS和JavaScript實(shí)現(xiàn)預(yù)加載
方法二：僅使用JavaScript實(shí)現(xiàn)預(yù)加載
方法三：使用Ajax實(shí)現(xiàn)預(yù)加載
