JavaScript图片延迟加载插件Echo.js使用详解

HTML5 herman 1341浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

使用过淘宝的人都知道,我们在浏览淘宝页面时,淘宝上有非常多的图片。如果需要全部加在,那在3秒之内可能完全打不开淘宝。而现实是淘宝能够在3秒之内打开。
淘宝这么高深的技术是怎么做的呢?答案是动态加载,或者说是图片懒加载。本文将介绍一款微型的插件JavaScript图片延迟加载库Echo.js,实现类似淘宝这样的动态加载功能。

图片延迟加载

Echo.js是一个标准的独立的Javascript图片懒加载(延迟加载)库,它非常小巧快速,只有2KB,它使用HTML5的 data-*属性,延迟请求加载图片资源,不依赖任意第三方插件库,特别适用于移动端需要加载大量图片的应用。

使用方法

引入文件

<script src="js/echo.min.js"></script>

HTML结构

<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

blank.gif 是一个 1 x 1 的图片,用做默认图片,data-echo 的属性值是图片的真实地址。你可以给图片设置宽度和高度,或者在 CSS 中设置,否则似乎很底部很底部的图片才会延迟加载。

然后初始化echo.js

echo.init({ 
    offset: 100, 
    throttle: 250, 
    unload: false, 
    callback: function (element, op) { 
      console.log('loaded ok.'); 
    } 
});

常用参数及方法说明

参数 描述 默认值
offset 离可视区域多少像素的图片可以被加载 0
throttle 图片延迟多少毫秒加载 250
debounce 防抖动 true
unload 告诉echo是加载还是卸载视图中的图片,当图片离开视图区域时触发 false
callback 回调函数,用来检测图片是否加载 function()

最后echo.js还提供了一个.render()方法,用法如下:

echo.render();

应用场景:当你的页面没有发生滚动,而你想加载即将要显示的图片,如图片轮播,当第一张图片显示完,接着滑动展示第二张图片,这个时候使用echo.render();提前加载第二张图片,就不会出现图片加载卡顿白屏等现象。

下面是一个demo的全部实现代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>简单的JavaScript图像延迟加载库Echo.js</title>
<style>
.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}
</style>
</head>
<!-- 业余草:www.xttblog.com -->
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示</h1>
<div class="demo" style="width: 736px; margin: 0 auto;">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg">
</div>
<script src="js/echo.min.js"></script>
<script>
Echo.init({
    offset: 0,
    throttle: 0
});
</script>
</body>
</html>

前面写过两篇类似的延迟加载的文章《jQuery图片延迟加载插件lazyload.js》和《前端性能优化:实现图片延迟加载之lazyload.js插件》。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » JavaScript图片延迟加载插件Echo.js使用详解