首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2014-01-22 
Echo.js 一个简单的JavaScript图片与加载插件?我们都知道目前解决图片与加载问题,有一个十分流行的方法就

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

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

?

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

?

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

?

<img src="img/blank.gif" alt="Echo.js 一个简略的JavaScript图片与加载插件" 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图片与加载插件

?

热点排行