图片懒加载 echo.js

 (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 () {
var nodes = document.querySelectorAll('img[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 {
elem.src = elem.getAttribute('data-echo');
} 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; });

如何使用

1、引入文件

  1. <script src="js/echo.min.js"></script>

2、HTML结构

  1. <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg" />

blank.gif 是一个 1 x 1 的图片,用做默认图片,data-echo 的属性值是图片的真实地址。你可以给图片设置宽度和高度,或者在 CSS 中设置,否则似乎很底部很底部的图片才会延迟加载。

3、JavaScript

     echo.init({
offset: 100,
throttle: 250,
unload: false,
callback: function (element, op) {
console.log('loaded ok.');
}
});

4、常用参数及方法说明

参数 描述 默认值
offset 离可视区域多少像素的图片可以被加载 0
throttle 图片延迟多少毫秒加载 250
debounce 防抖动 true
unload 告诉echo是加载还是卸载视图中的图片,当图片离开视图区域时触发 false
callback 回调函数,用来检测图片是否加载 function()

最后echo.js还提供了一个.render()方法,用法如下:

echo.render();

应用场景:当你的页面没有发生滚动,而你想加载即将要显示的图片,如图片轮播,当第一张图片显示完,接着滑动展示第二张图片,这个时候使用echo.render()

 

提前加载第二张图片,就不会出现图片加载卡顿白屏等现象。

上一篇:js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用


下一篇:JS实现-页面数据无限加载