JS圖片懶載入技術實現過程解析
阿新 • • 發佈：2020-07-28
懶載入技術
懶載入（LazyLoad）是前端優化的一種有效方式，極大的提升使用者體驗，圖片一直是頁面載入的流浪大戶，現在一張圖片幾兆已經是很正常的事，遠遠大於程式碼的大小。
原理：頁面載入後只讓文件可視區內的圖片顯示，其它不顯示，隨著使用者對頁面的滾動，判斷其區域位置，生成img標籤，讓到可視區的圖片加載出來。
所用相關技術：給img加屬性 (例如data-src），將圖片的地址賦值給他，這樣就生成img標籤後再把data-src的值賦給img的src（通過dataset.src或者getAttribute('src'),再賦值給img.setAttribute('src')）。
jqueryLazyload方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding: 0;
}
.wrap{
overflow: hidden;
width:915px;
background:#2d2d2d;
margin:50px auto;
border-radius:10px;
/*font-size:0px;*/
}
.wrap img{
float:left;
display: block;
width:280px;
height:180px;
margin:10px 10px;
border:2px solid #7c7c7c;
border-radius:10px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<img src="js/images2/3.jpg" />
<img src="js/images2/4.jpg" />
<img src="js/images2/5.jpg" />
<img src="js/images2/6.jpg" />
<img src="js/images2/7.jpg" />
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<img src="js/images2/3.jpg" />
<img src="js/images2/4.jpg" />
<img src="js/images2/5.jpg" />
<img src="js/images2/6.jpg" />
<img src="js/images2/7.jpg" />
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<img src="js/images2/3.jpg" />
<img src="js/images2/4.jpg" />
<img src="js/images2/5.jpg" />
<img src="js/images2/6.jpg" />
<img src="js/images2/7.jpg" />
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<img src="js/images2/3.jpg" />
<img src="js/images2/4.jpg" />
<img src="js/images2/5.jpg" />
<img src="js/images2/6.jpg" />
<img src="js/images2/7.jpg" />
<img src="js/images2/1.jpg" />
<img src="js/images2/2.jpg" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/lazyload.js"></script>
<script>
$("img").lazyload({
placeholder :"images2/loading.gif",//用圖片提前佔位
// placeholder,值為某一圖片路徑.此圖片用來佔據將要載入的圖片的位置,待圖片載入時,佔位圖則會隱藏
effect: "fadeIn",// 載入使用何種效果
// effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200,// 提前開始載入
// threshold,值為數字,代表頁面高度.如設定為200,表示滾動條在離目標位置還有200的高度時就開始載入圖片,可以做到不讓使用者察覺
// event: 'click',// 事件觸發時才載入
// event,值有click(點選),mouseover(滑鼠劃過),sporty(運動的),foobar(…).可以實現滑鼠莫過或點選圖片才開始載入,後兩個值未測試…
//container: $("#container"),// 對某容器中的圖片實現效果
// container,值為某容器.lazyload預設在拉動瀏覽器滾動條時生效,這個引數可以讓你在拉動某DIV的滾動條時依次載入其中的圖片
//failurelimit : 10 // 圖片排序混亂時
// failurelimit,值為數字.lazyload預設在找到第一張不在可見區域裡的圖片時則不再繼續載入,但當HTML容器混亂的時候可能出現可見區域內圖片並沒加載出來的情況,failurelimit意在載入N張可見區域外的圖片,以避免出現這個問題.
});
</script>
</div>
</body>
</html>echo.js方式
echo.js是一款非常簡單實用輕量級的圖片延時載入外掛，如果你的專案中沒有依賴jquery，那麼這將是個不錯的選擇，50行程式碼，壓縮後才1k。當然你完全可以整合到自己專案中去。
下載地址：https://github.com/helijun/helijun/tree/master/plugin/echo
<style>
.demo img {
width: 736px;
height: 490px;
background: url(images/loading.gif) 50% no-repeat;}
</style>
<div class="demo"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> </div>
<script src="js/echo.min.js"></script>
<script>
Echo.init({
offset: 0,//離可視區域多少畫素的圖片可以被載入
throttle: 0 //圖片延時多少毫秒載入
});
</script>
說明：blank.gif是一張背景圖片，包含在外掛裡了。圖片的寬高必須設定，當然，可以使用外部樣式對多張圖片統一控制大小。data-echo指向的是真正的圖片地址。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。