問題
一個電商網站上有大量的圖片，加載很慢，如何使用懶加載優化用戶體驗？
懶加載的原理：
先讓所有的圖片都顯示同一張圖片，在通過判斷窗口大小以及滾動距離，判斷該 DOM 元素是否在我們已視區域，如果在已視區域，則用 js 修改 img 標籤的 src 爲 data 中儲存的真正的 src ,然後再添加一些圖片出現的特效即可！
html 代碼
<div class="lazyload">
<div>
<ul>
<li class="item">
<a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher2.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher3.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher4.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher5.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher6.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher7.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher8.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher9.jpg" src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"></a>
</li>
</ul>
</div>
</div>其中 data-img 儲存的是 img 的真正的 src。
CSS代碼：
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
.lazyload img {
width: 640px;
}
.lazyload{
width: 700px;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width: 980px) {
.lazyload img {
width: 100%;
height: 480px;
}
.lazyload{
width: 100%;
margin: 0 auto;
text-align: center;
}
}這裏做了一些用戶體驗優化，當屏幕小於980px時，圖片寬度100%，用到了媒體查詢@media
JS 代碼：
var lazyLoad = (function(){
var clock;
// 函數初始化，啓動監聽
function init(){
// 監聽滾動
$(window).on("scroll", function(){
// 清楚定時器，當滾動時間位於 200ms 內時，減少不必要的遍歷
if (clock) {
clearTimeout(clock);
}
// 滾動兩百毫秒後遍歷一次檢查
clock = setTimeout(function(){
checkShow();
}, 200);
})
// 檢查圖片是否處於已視區域
checkShow();
}
// 檢查圖片是否處於已視區域
function checkShow(){
$(".lazyload img").each(function(){
var $cur =$(this);
// 給每個 img 增加一個 isLoaded 屬性
// 如果 isLoaded 爲 true ,則不用再次顯示，return 回去
if($cur.attr('isLoaded')){
return;
}
// 如果 shouldShow($cur) 爲 true,則表示該圖片位於已視區域，且 isLoaded 屬性還未存在
if(shouldShow($cur)){
// 展示該圖片真正src
showImg($cur);
}
})
}
// $node 代表 this，表示 img 數組裏面對應的每一個 img
function shouldShow($node){
// 獲取距離窗口滾動距離，窗口高度，和圖片距離文檔頂部的距離
var scrollH = $(window).scrollTop(),
winH = $(window).height(),
top = $node.offset().top;
// 如果圖片距離文檔頂部的距離小於距離窗口滾動距離+窗口高度，那麼處於已視區域，否則處於未視區域
if(top < winH + scrollH){
return true;
}else{
return false;
}
}
// 展示該圖片真正src
function showImg($node){
// 先將圖片隱藏
$node.hide()
// 設置該圖片真正src
$node.attr('src', $node.attr('data-img'));
// 讓圖片淡入
$node.fadeIn()
// 設置 isLoaded 屬性爲 true
$node.attr('isLoaded', true);
}
// 返回 init 方法
return {
init: init
}
})()
// 調用lazyLoad.init()方法
lazyLoad.init();記得，本文基於JQ進行操作，記得引入JQ
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>個人認爲這是最簡單理解懶加載的實例，項目DEMO請點擊這裏。
希望本文對你有用，喜歡就點個頂唄！(❤ ω ❤)
