使用echo.js实现图片懒加载
裴欣荣
页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>使用echo.js实现图片懒加载</title>
<style>
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
list-style: none;
}
ul{
width: 320px;
margin: 20px auto;
}
ul li{
width: 150px;
float: left;
margin-right: 20px;
}
ul li:nth-of-type(2n){
margin-right: 0;
}
ul li img {
display: block;
width: 150px;
height: 152px;
background: url(img/loading.gif) 50% no-repeat;
}
ul li p{
text-align: center;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<!-- 注意事项：最好给图片设置宽度和高度
img中src是起到占位的作用,指向默认加载图片路径 真正加载的图片是data-echo里面定义的 -->
<ul>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第1个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第2个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第3个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第4</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第5个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第6个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第7个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第8个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第9个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第10个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第11个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第12个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第13个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第14个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第15个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第16个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第17个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第18个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第19个</p>
</li>
<li>
<img src="img/blank.gif" data-echo="img/ig.jpg" />
<p>第20个</p>
</li>
</ul>
<script type="text/javascript" src="js/echo.js"></script>
<script>
echo.init({
offset: 0,//离可视区域多少像素的图片可以被加载
throttle: 0,//图片延时多少毫秒加载
});
</script>
</body>
</html>
echo.js代码
/*! echo-js v1.7.3 | (c) 2016 @toddmotto | https://github.com/toddmotto/echo */
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(function() {
return factory(root);
});
} else if (typeof exports === 'object') {
module.exports = factory;
} else {
root.echo = factory(root);
}
})(this, function (root) {
'use strict';
var echo = {};
var callback = function () {};
var offset, poll, delay, useDebounce, unload;
var isHidden = function (element) {
return (element.offsetParent === null);
};
var inView = function (element, view) {
if (isHidden(element)) {
return false;
}
var box = element.getBoundingClientRect();
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
};
var debounceOrThrottle = function () {
if(!useDebounce && !!poll) {
return;
}
clearTimeout(poll);
poll = setTimeout(function(){
echo.render();
poll = null;
}, delay);
};
echo.init = function (opts) {
opts = opts || {};
var offsetAll = opts.offset || 0;
var offsetVertical = opts.offsetVertical || offsetAll;
var offsetHorizontal = opts.offsetHorizontal || offsetAll;
var optionToInt = function (opt, fallback) {
return parseInt(opt || fallback, 10);
};
offset = {
t: optionToInt(opts.offsetTop, offsetVertical),
b: optionToInt(opts.offsetBottom, offsetVertical),
l: optionToInt(opts.offsetLeft, offsetHorizontal),
r: optionToInt(opts.offsetRight, offsetHorizontal)
};
delay = optionToInt(opts.throttle, 250);
useDebounce = opts.debounce !== false;
unload = !!opts.unload;
callback = opts.callback || callback;
echo.render();
if (document.addEventListener) {
root.addEventListener('scroll', debounceOrThrottle, false);
root.addEventListener('load', debounceOrThrottle, false);
} else {
root.attachEvent('onscroll', debounceOrThrottle);
root.attachEvent('onload', debounceOrThrottle);
}
};
echo.render = function (context) {
var nodes = (context || document).querySelectorAll('[data-echo], [data-echo-background]');
var length = nodes.length;
var src, elem;
var view = {
l: 0 - offset.l,
t: 0 - offset.t,
b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
};
for (var i = 0; i < length; i++) {
elem = nodes[i];
if (inView(elem, view)) {
if (unload) {
elem.setAttribute('data-echo-placeholder', elem.src);
}
if (elem.getAttribute('data-echo-background') !== null) {
elem.style.backgroundImage = 'url(' + elem.getAttribute('data-echo-background') + ')';
}
else if (elem.src !== (src = elem.getAttribute('data-echo'))) {
elem.src = src;
}
if (!unload) {
elem.removeAttribute('data-echo');
elem.removeAttribute('data-echo-background');
}
callback(elem, 'load');
}
else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
if (elem.getAttribute('data-echo-background') !== null) {
elem.style.backgroundImage = 'url(' + src + ')';
}
else {
elem.src = src;
}
elem.removeAttribute('data-echo-placeholder');
callback(elem, 'unload');
}
}
if (!length) {
echo.detach();
}
};
echo.detach = function () {
if (document.removeEventListener) {
root.removeEventListener('scroll', debounceOrThrottle);
} else {
root.detachEvent('onscroll', debounceOrThrottle);
}
clearTimeout(poll);
};
return echo;
});
类似资料：