前端圖檔懶加載兩種實作方式
- 一、問題描述
- 二、jquery.lazyload.js
-
- 1.使用方法：
- 2.參數詳細設定：
- 3.具體實作：
- 三、echo.js
-
- 1.使用方法：
- 2.具體實作：
- 3.源碼修改：
- 4.完整源碼：
一、問題描述
在開發頁面的時候肯定會遇到圖檔比較多的時候，雖然我們可能有圖檔分布式的伺服器，但是在用戶端還是會有很大的性能開銷。為了使用者體驗，特别是對首屏加載速度要求很高的，通常我們會考慮圖檔延時加載，lazyloading這款插件已經能很好地實作這一功能，可是是基于jQuery，對于移動端可能不太實用。
移動端或者非jquery環境下推薦一個叫echo的插件
二、jquery.lazyload.js
1.使用方法：
jquery.lazyload.js需要依賴jquery，是以我們要在引入jquery.lazyload.js之前引入jquery
<script src="../../js插件/jquery-1.11.3.min.js"></script>
<script src="../../js插件/jquery.lazyload.js"></script>
在html中為圖檔加入樣式lazy 圖檔路徑引用方法用data-original。例如：
<img width="1158" height="768" class="lazy" alt="" data-original="img/bg2.png">
<img width="1158" height="768" class="lazy" alt="" data-original="img/bg3.png">
js出始化lazyload并設定圖檔顯示方式：
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>
2.參數詳細設定：
$("img.lazy").lazyload({
placeholder : "img/loading.gif", //用圖檔提前占位
// placeholder,值為某一圖檔路徑.此圖檔用來占據将要加載的圖檔的位置,待圖檔加載時,占位圖則會隐藏
effect: "fadeIn", // 載入使用何種效果
// effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前開始加載
// threshold,值為數字,代表頁面高度.如設定為200,表示滾動條在離目标位置還有200的高度時就開始加載圖檔,可以做到不讓使用者察覺
event: 'click', // 事件觸發時才加載，click(點選),mouseover(滑鼠劃過),sporty(運動的),預設為scroll（滑動）
container: $("#container"), // 對某容器中的圖檔實作效果
// container,值為某容器.lazyload預設在拉動浏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖檔
failure_limit : 10 // 圖檔排序混亂時
// failure_limit,值為數字.lazyload預設在找到第一張不在可見區域裡的圖檔時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域内圖檔并沒加載出來的情況,failure_limit意在加載N張可見區域外的圖檔,以避免出現這個問題.
});
3.具體實作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--jquery.lazyload.js插件實作-->
<img width="1158" height="768" class="lazy" alt="" data-original="img/bg1.jpg">
<img width="1158" height="768" class="lazy" alt="" data-original="img/bg2.jpg">
<img width="1158" height="768" class="lazy" alt="" data-original="img/bg3.jpg">
<img width="1158" height="768" class="lazy" alt="" data-original="img/bg1.png">
<img width="1158" height="768" class="lazy" alt="" data-original="img/bg2.png">
<img width="1158" height="768" class="lazy" alt="" data-original="img/bg3.png">
<script src="../../js插件/jquery-1.11.3.min.js"></script>
<script src="../../js插件/jquery.lazyload.js"></script>
<script>
$(function() {
$("img.lazy").lazyload({
placeholder : "img/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的滾動條時依次加載其中的圖檔
failure_limit : 10 // 圖檔排序混亂時
// failure_limit,值為數字.lazyload預設在找到第一張不在可見區域裡的圖檔時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域内圖檔并沒加載出來的情況,failure_limit意在加載N張可見區域外的圖檔,以避免出現這個問題.
});
});
</script>
</body>
</html>
三、echo.js
如果你的項目中沒有依賴jquery，那麼這将是個不錯的選擇，50行代碼，壓縮後才1k。當然你完全可以內建到自己項目中去！
1.使用方法：
首先在頁面中引入echo.js插件
在html中為圖檔加入樣式lazy 圖檔路徑引用方法用data-echo。例如：
對頁面圖檔進行懶加載初始化
<script>
Echo.init({
offset: 0, //離可視區域多少像素的圖檔可以被加載
throttle: 0 //圖檔延時多少毫秒加載
});
</script>
2.具體實作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.lazy {
width: 1158px;
height: 768px;
}
</style>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">簡單的JavaScript圖像延遲加載庫Echo.js示範</h1>
<div class="demo" style="width: 736px; margin: 0 auto;">
<img class="lazy" src="images/blank.gif" data-echo="images/bg1.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/bg2.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/bg3.jpg">
<img class="lazy" src="images/blank.gif" data-echo="images/bg1.png">
<img class="lazy" src="images/blank.gif" data-echo="images/bg2.png">
<img class="lazy" src="images/blank.gif" data-echo="images/bg3.png">
</div>
<script src="js/echo.js"></script>
<script>
Echo.init({
offset: 0, //離可視區域多少像素的圖檔可以被加載
throttle: 0 //圖檔延時多少毫秒加載
});
</script>
</body>
</html>
3.源碼修改：
源碼隻實作了從上到下的懶加載，沒有實作從下到上的懶加載。當頁面在最下方時，重新整理頁面就直接加載了所有圖檔，是以對源碼進行微調：
在源碼的_inView方法的return加上一個條件語句：
coords.bottom >0 - parseInt(offset)
目的是當元素的底部到可視視窗的頂部距離小于我們設定的偏移高度時，才進行加載。即當圖檔位于可視區域上方大于偏移量時，就不加載圖檔。
由圖可知，圖檔位于可視區域上方，bottom為負數。
4.完整源碼：
/*!
* Echo v1.4.0
* Lazy-loading with data-* attributes, offsets and throttle options
* Project: https://github.com/toddmotto/echo
* by Todd Motto: http://toddmotto.com
* Copyright. MIT licensed.
*/
window.Echo = (function(window, document, undefined) {
'use strict';
var store = [],
offset,
throttle,
poll;
var _inView = function(el) {
var coords = el.getBoundingClientRect();
return (
(
(coords.top >= 0 && coords.left >= 0 && coords.top)
<=
(window.innerHeight || document.documentElement.clientHeight) + parseInt(offset))
&&
coords.bottom >0 - parseInt(offset));
};
var _pollImages = function() {
for (var i = store.length; i--;) {
var self = store[i];
if (_inView(self)) {
self.src = self.getAttribute('data-echo');
store.splice(i, 1);
}
}
};
var _throttle = function() {
clearTimeout(poll);
poll = setTimeout(_pollImages, throttle);
};
var init = function(obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {};
offset = opts.offset || 0;
throttle = opts.throttle || 250;
for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]);
}
_throttle();
if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false);
} else {
window.attachEvent('onscroll', _throttle);
}
};
return {
init: init,
render: _throttle
};
})(window, document);