700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > WEB前端 实现图片懒加载 echo.js

WEB前端 实现图片懒加载 echo.js

时间:2021-08-15 01:36:04

相关推荐

WEB前端 实现图片懒加载 echo.js

echo.js是一个轻小的图片懒加载js插件,在使用过程中很多朋友可能是直接自定义一张占位图片,可能会造成图片的变形等。其实这并不是最佳的解决方案。下面给大家介绍另一种方法,简单的控制下css,实现loading效果

首先我们准备一张1*1px透明gif图片(blank.gif),和一个loading图片。

<img class="loading" src="blank.gif" data-echo="图片真实路径" />

1

Echo 是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足1k)和使用 HTML5 的 data- 属性。Echo 支持 IE8+ 。

示例代码

<body> <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">//blank.gif为预加载的照片,photo.jpg为最后显示的照片<script src="dist/echo.js"></script> <script> Echo.init({ offset: 0, throttle: 250 //设置图片延迟加载的时间 }); // Echo.render(); is also available for non-scroll callbacks </script> </body>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。