图像延迟加载库Echo.js纯javascript轻量级延迟加载

图像延迟加载库Echo.js纯javascript轻量级延迟加载-第1张-菜鸟博客

要想进一步提升网页打开速度,可以上传的图片优化入手。

网页慢,无非是,一查询慢,二图片加载慢,三没有使用延迟加载,四图片数据太大。

根据这些原因,逐步解决,从而提升用户体验。

下面介绍一款插件Echo.js

和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库,可独立使用。并且 Echo.js 非常小巧,压缩后不足 1KB。

使用Echo.js很简单,只需将data-echo属性添加到img标签即可直接将图像添加到页面中即可。

Echo.js食用方法:

<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)加载


图像延迟加载库Echo.js大小:1kb | 来源:百度网盘 | 提取码:mjwh

猜你喜欢

发表评论