移动端 延迟加载echo.js的使用

浏览器支持ie8+

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

<script>
window.echo = (function (window, document) {

  'use strict';

  /*
   * Constructor function
   */
  var Echo = function (elem) {
    this.elem = elem;
    this.render();
    this.listen();
  };

  /*
   * Images for echoing
   */
  var echoStore = [];

  /*
   * Element in viewport logic
   */
  var scrolledIntoView = function (element) {
    var coords = element.getBoundingClientRect();
    return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));
  };

  /*
   * Changing src attr logic
   */
  var echoSrc = function (img, callback) {
    img.src = img.getAttribute('data-echo');
    if (callback) {
      callback();
    }
  };

  /*
   * Remove loaded item from array
   */
  var removeEcho = function (element, index) {
    if (echoStore.indexOf(element) !== -1) {
      echoStore.splice(index, 1);
    }
  };

  /*
   * Echo the images and callbacks
   */
  var echoImages = function () {
    for (var i = 0; i < echoStore.length; i++) {
      var self = echoStore[i];
      if (scrolledIntoView(self)) {
        echoSrc(self, removeEcho(self, i));
      }

		  //if (scrolledIntoView(self)) {
//			echoSrc(self, removeEcho(self, i));
//			continue;
//			}
//
//			i++;
//			}
//if i == 0 and image echoStore[0] is now in the view, than handler it. After splice(i, 1); the next image u got to check is still echoStore[0], but the next loop check from 1 (i=1).and this cuz the following puzzle that some guys menstioned.
    }
  };

  /*
   * Prototypal setup
   */
  Echo.prototype = {
    init : function () {
      echoStore.push(this.elem);
    },
    render : function () {
      if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', echoImages, false);
      } else {
        window.onload = echoImages;
      }
    },
    listen : function () {
      window.onscroll = echoImages;
    }
  };

  /*
   * Initiate the plugin
   */
  var lazyImgs = document.querySelectorAll('img[data-echo]');
  for (var i = 0; i < lazyImgs.length; i++) {
    new Echo(lazyImgs[i]).init();
  }

//  [].forEach.call(document.querySelectorAll('img[data-echo]'), function (img) {
//  new Echo(img).init();
//}

})(window, document);
</script>

使用的方法

<script>
Echo.init({

offset: 1100,  //距离可视区
throttle: 50  //延迟时间

});
</script>