Echo.js 一个简单的JavaScript图片与加载插件

 

我们都知道目前解决图片与加载问题，有一个十分流行的方法就是使用lazy load延迟加载的特性，使用该方法可以在一定程度上提升网站的加载性能，但今天要介绍的是另外一款与图片预加载插件 Echo.js，它有一个优点就是无需jquery的帮助，非常轻量级大小不足1KB，只需一小段js代码即可实现lazy load相同的效果。

 

使用方法：
第一步：在要实现图片与加载的 img标签中添加如下代码

 

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

 

当鼠标移动到图片可视区域时就会自动切换到data-echo所指向的图片路径。

第二步：添加一段js脚本

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));
      }
    }
  };
 
  /*
   * 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();
  }
 
})(window, document);

 

演示效果

 

文章来源：Echo.js 一个简单的JavaScript图片与加载插件