移动端 延迟加载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>