图片延迟加载库Echo.js纯JS轻量级延迟加载

2020-05-05 10:44:02 / 2 评论 / 10608 阅读 / 正在检测是否收录...

想要网页更快速的访问,除了各种优化之外还可以用到一些小功能,比如说图片优化。众所周知,图片多的网站一般来说加载比较慢。
网页慢,要么是查询慢,或者图片加载慢,再或者说没有使用延迟加载,导致图片数据太大。根据这些原因,逐步解决,从而提升用户体验。
下面介绍一款插件Echo.js
和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库,可独立使用。并且 Echo.js 非常小巧,压缩后不足 1KB。
使用Echo.js很简单,只需将data-echo属性添加到img标签即可直接将图像添加到页面中即可。

<body>
<img src="img/blank.gif" alt="Pic" data-echo="img/pic.jpg">

<script src="dist/echo.min.js"></script>
<script>
  Echo.init({
    offset: 0,
    throttle: 0
  });
</script>
</body>

参数说明:

offset 离可视区域多少像素的图片可以被加载

throttle 图片延迟多少毫秒(ms)加载
[cv]

Echo.js

版本:大小:632.00 B

下载

Echo.js纯JS轻量级延迟加载

[/cv]

评论(2)

取消