1.懶加載原理
原理：先將img標簽中的src鏈接設為同一張圖片（空白圖片），將其真正的圖片地址存儲再img標簽的自定義屬性中
（比如data-src）。當js監(jiān)聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到
懶加載的效果。
這樣做能防止頁面一次性向服務器響應大量請求導致服務器響應慢，頁面卡頓或崩潰等問題
2.為什么要使用懶加載？
很多頁面，內(nèi)容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數(shù)量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性加載完畢。估計大家都會等到黃花變成黃花菜了。
這樣做能防止頁面一次性向服務器響應大量請求導致服務器響應慢，頁面卡頓或崩潰等問題。-->
既然懶加載的原理是基于判斷元素是否出現(xiàn)在窗口可視范圍內(nèi)，首先我們寫一個函數(shù)判斷元素是否出現(xiàn)在可視范圍內(nèi)：-
function isVisible($node){
var winH = $(window).height(),
scrollTop = $(window).scrollTop(),
offSetTop = $(window).offSet().top;
if (offSetTop < winH + scrollTop) {
return true;
} else {
return false;
}
再添加上瀏覽器的事件監(jiān)聽函數(shù)，讓瀏覽器每次滾動就檢查元素是否出現(xiàn)在窗口可視范圍內(nèi)：
$(window).on("scroll", function{
if (isVisible($node)){
console.log(true);
}
})
我們已經(jīng)很接近了，現(xiàn)在我們要做的是，讓元素只在第一次被檢查到時打印true，之后就不再打印了
var hasShowed = false;
$(window).on("sroll",function{
if (hasShowed) {
return;
} else {
if (isVisible($node)) {
hasShowed = !hasShowed;
console.log(true);
}
}
懶加載的優(yōu)點是什么？
頁面加載速度快、可以減輕服務器的壓力、節(jié)約了流量,用戶體驗好
2、預加載
1.什么是預加載？
提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染
2.為什么要使用預加載？
圖片預先加載到瀏覽器中，訪問者便可順利地在你的網(wǎng)站上沖浪，并享受到極快的加載速度。這對圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來說十分有利，它保證了圖片快速、無縫地發(fā)布，也可幫助用戶在瀏覽你網(wǎng)站內(nèi)容時獲得更好的用戶體驗。
3.實現(xiàn)預加載的方法有哪些？
方法一：用CSS和JavaScript實現(xiàn)預加載
方法二：僅使用JavaScript實現(xiàn)預加載
方法三：使用Ajax實現(xiàn)預加載
懶加載和預加載的對比
1)概念：
懶加載也叫延遲加載：JS圖片延遲加載,延遲加載圖片或符合某些條件時才加載某些圖片。
預加載：提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染。
2)區(qū)別：
兩種技術的本質(zhì)：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。
3)懶加載的意義及實現(xiàn)方式有：
意義：
懶加載的主要目的是作為服務器前端的優(yōu)化，減少請求數(shù)或延遲請求數(shù)。
實現(xiàn)方式：
1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.
2.第二種是條件加載，符合某些條件，或觸發(fā)了某些事件才開始異步下載。
3.第三種是可視區(qū)加載，即僅加載用戶可以看到的區(qū)域，這個主要由監(jiān)控滾動條來實現(xiàn)，一般會在距用戶看到某圖片前一定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片。
4)預加載的意義及實現(xiàn)方式有：
意義:
預加載可以說是犧牲服務器前端性能，換取更好的用戶體驗，這樣可以使用戶的操作得到最快的反映。
實現(xiàn)方式：
實現(xiàn)預載的方法非常多，比如：用CSS和JavaScript實現(xiàn)預加載；僅使用JavaScript實現(xiàn)預加載；使用Ajax實現(xiàn)預加載。
常用的是new Image();設置其src來實現(xiàn)預載，再使用onload方法回調(diào)預載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會使用緩存，這是最基本也是最實用的預載方法。當Image下載完圖片頭后，會得到寬和高，因此可以在預載前得到圖片的大小(方法是用記時器輪循寬高變化)。
