實現原理：
1、對於img標簽，只要將圖片地址賦給src屬性，瀏覽器解析的時候就會自動去請求圖片地址所指向的資源，瀏覽器的這個機制我們是沒辦法改變的，那么我們只能在src屬性上做文章，在剛開始的時候我們把圖片地址賦給img標簽一個自定義屬性例如data-src，src屬性留空。
2、設置一個定時器定時檢測出現在視圖內的圖片，並將其data-src屬性的值賦值給src屬性。（其實這個地方也可以通過事件來檢測）
原生js的實現：
var
imgs = document.getElementsByTagName(
"img"
);
function
lazyload(){
var
scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
var
viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
for
(
var
i=0,len=imgs.length;i<len;i++){
var
x = scrollTop + viewportSize - imgs[i].offsetTop;
if
(x>0){
imgs[i].src = imgs[i].getAttribute(
"loadpic"
);
}
}
}
setInterval(lazyload,1000);
jQuery的實現：
$(
function
(){
var
viewportSize = $(window).height();
var
lazyload =
function
(){
var
scrollTop = $(window).scrollTop();
$(
"img"
).each(
function
(){
var
_this = $(
this
);
var
x = viewportSize + scrollTop + _this.position().top;
if
(x>0){
_this.attr(
"src"
,_this.attr(
"loadpic"
));
}
})
}
setInterval(lazyload,1000);
})
我是分割線---------------------------------------------------------------------------------------------------------------------------------------------
圖片延遲加載主要是用來解決一個頁面中圖片太多，導致打開頁面的時候一次性加載太多圖片導致打開速度慢的問題。現在在很多網站上都用得很多，比如說微店，淘寶等一些圖片量較大的網站，采取懶加載也是利於用戶體驗。
原理即是網頁代碼中有img標簽，但是沒有src屬性，只是把src原本應該放的圖片鏈接放到另外一個屬性值去，比如說data-src，這樣瀏覽器就不能把圖片渲染出來。但是可以通過js獲取這個圖片鏈接，通過適時把獲取到的圖片鏈接賦值給src屬性上，這樣圖片就能在適時的時候渲染出來，而不是一次性全部加載，而是通過鼠標滾動，一個一個加載進來。
基於jQuery的代碼（使用前務必引入jQuery）：
-
<img class="lazy" alt="" data-src="http://wd.geilicdn.com/vshop.jpg" />
-
<script>
-
$(window).scroll(function() {//窗口滾動的時候（鼠標滾輪的時候。。）
-
$('img').each(function() {//把以下的方法作用到每一個img標簽，可自行加限定條件
-
var $imgSrc = $(this).attr('data-src');//獲取每張圖片對應地址
-
var $imgTop = $(this).offset().top;//獲取每張圖片對應距離document頂部的高度
-
var scrollT = $(window).scrollTop();//獲取滾輪滾動的距離
-
var halfDoc = $(window).height();//獲取瀏覽器窗口可視高度
-
var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滾動距離加上窗口可視高度大於該圖片距離document頂部的高度
-
var _this=this;//保存this的作用域以便於在其它作用域上使用這個作用域
-
if(ifElse){//如果條件成立
-
setTimeout(function(){$(_this).attr('src',$imgSrc);},1000);//把圖片的src地址改成data-src的值（前面已經獲取了）
-
}
-
})//end object 'img'
-
})//end object window
-
</script>
====================================================================================================================================================================
-它的實現原理很簡單，先把img的src指向一個小圖片，圖片真實的地址存儲在img一個自定義的屬性里,<img src="lazy-load.png" data-src="xxx" />,等到此圖片出現在視野范圍內了，獲取img元素，把data-src里的值賦給src。
（一）獲取窗口、窗口滾動和元素距離窗口頂部的偏移高度，計算元素是否出現在窗口可視范圍內；
function isShow($el){
var winH = $(window).height(),//獲取窗口高度 scrollH = $(window).scrollTop(),//獲取窗口滾動高度 top = $el.offset().top;//獲取元素距離窗口頂部偏移高度
if(top < scrollH + winH){
return true;//在可視范圍
}else{
return false;//不在可視范圍
} }
（二）監聽窗口滾動事件，檢查元素是否在可視范圍內;
$(window).on('scroll', function(){//監聽滾動事件 checkShow(); }) checkShow(); function checkShow(){//檢查元素是否在可視范圍內 $('img').each(function(){//遍歷每一個元素 var $cur = $(this); if(!!isloaded($cur)){return;}//判斷是否已加載 if (isShow($cur)) { setTimeout(function(){ showImg($cur); },300)//設置時間是為了更好的看出效果 }; }); }
（三）元素顯示的時候把之前的默認照片替換成data-src里的照片。
function showImg($el){ $el.attr('src', $el.attr('data-src')); $cur.data('isloaded',true); }
