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);
相关推荐
yboker 2020-05-07
wikiwater 2020-10-27
阿斌Elements 2020-06-11
zrtlin 2020-11-09
xuebingnan 2020-11-05
heheeheh 2020-10-19
Crazyshark 2020-09-15
softwear 2020-08-21
ZGCdemo 2020-08-16
jczwilliam 2020-08-16
littleFatty 2020-08-16
idning 2020-08-03
jinxiutong 2020-07-26
lanzhusiyu 2020-07-19