我们都知道目前解决图片与加载问题,有一个十分流行的方法就是使用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图片与加载插件
相关推荐
echo.js图片懒加载插件
echo是一个独立的JavaScript(不依靠jQuery)、轻量级的、延迟图片加载插件,echo压缩后体积不到1k,使用html的标准data-*属性,echo支持IE8+。http://www.yeedoo.net/programming/59.html
Echo 是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足1k)和使用 HTML5 的 data- 属性,通过本文给大家介绍JavaScript图像延迟加载库Echo.js ,感兴趣的朋友一起学习吧
Echo 是一个轻量的 JS 图片懒加载插件,不依赖其它库。特别适用于移动端需要加载大量图片的应用。使用方法,查看https://blog.csdn.net/qq_44952391/article/details/122477458?spm=1001.2014.3001.5502
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库,压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视区域的时候,它就会改变图像的 src...
echo.js图片懒加载,亲测可用,插件也比较小,使用起来挺方便的
根目录 ...) ...│ robots.txt 搜索引擎爬虫配置文件 ...│ Echo.js 图片延迟加载插件 │ colpick.js 颜色插件 │ handlebars.js js模版引擎 │ waterfall.min.js 瀑布流插件 └─temp 测试数据、图片
Power PWChecker 是一个用来确保用户输入了安全... JavaScript图像延迟加载库Echo.js386 Echo 是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足1k)和使用 HTML5 的 data- 属性。Echo 支持 IE8 。 ...
H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版 ...│ Echo.js 图片延迟加载插件 │ colpick.js 颜色插件 │ handlebars.js js模版引擎 │ waterfall.min.js 瀑布流插件 └─temp 测试数据、图片
JavaScript图像延迟加载库Echo.js386 Echo 是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足1k)和使用 HTML5 的 data- 属性。Echo 支持 IE8 。 ... 相关教程 ...
将 JSON 数据包从 Amazon Echo 转发到一个或多个开发服务器的 Chrome 扩展 在 background.js 中更改服务器 url 并在 devtools.js 中过滤 url 在 Chrome 中,打开 chrome://extensions/ 页面。 检查开发人员模式。 ...
Echo Loader - 简化依赖加载以减少脚本冲突和冗余 配置存储和覆盖(即将推出) 集中部署管理(即将推出) 安装说明 克隆这个存储库。 从 (从包或源)下载并安装 NodeJS 和 npm。 须藤 npm install grunt-cli -g ...
5,拖动进赖这个框内.或者一步步找到相应的chrome路径 6,下载后出现上面的图.证明hook.js文件位置不对,我们到文件看看.发现,hook.js在src里,所以改文件路径为:src/hook.js 其它文件也依次改为相对应的路径. 7,改...
响应式简约Emlog个人技术博客主题techblog给自己一个基于Emlog程序搭建的教程笔记博客设计制作的emlog主题,整体除了微语部分使用了两个引号图标图片,以及手机端导航菜单的几行JS代码外,其余部分都是html+CSS制作...
我创建的一个演示,用于为单页应用程序配置Webpack。 配置包括npm集成,webpack-dev-server的安装以及一些常用的加载程序和插件。 感谢。 完整功能清单 npm集成(在package.json中) "scripts": { "start": ...
响应式简约emlog个人技术博客主题techblog给自己一个基于emlog程序搭建的教程笔记博客设计制作的emlog主题,整体除了微语部分使用了两个引号图标图片,以及手机端导航菜单的几行js代码外,其余部分都是HTML+CSS制作...
喜欢弄图片,还是老老实实制作单独的缩略图为上,找个简单的图片处理软件,裁剪一下图片尺寸,也不是什么难事,可以提高页面加载速度。 常用的缩略图显示在首页及分类文章列表页面,添加自定义栏目名称:thumbnail...
frida脚本可实现XposedBridge并加载xposed模块,而无需安装xposed框架。 在不安装Xposed Framework的情况下,通过Frida使用Xposed插件。 用法 准备工作 将XposedBridge.jar推入设备中 安装插件或将插件APK推入设备中...
<?... charset=utf-8); ...// 初始显示界面数据获取 ...// echo $data;die; $data = json_decode($data); // var_dump($data);die; ?> <!DOCTYPE html> <html lang=zh-cn> <head> <met