图片懒加载 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()

 

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