图像延迟加载库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)加载


来源:百度网盘 | 提取码:mjwh

猜你喜欢

纯CSS将img图片铺满父容器div并适配容器的大小

纯CSS将img图片铺满父容器div并适配容器的大小

当1个网页中加入好几张照片情况下,会遇到图片大小不一致,单需要显视成统一的尺寸,当我们真接設置图片大小会造成 照片出现变形,这就是我们遇到的难题,看下解决方案具体方法一对img元素垂直居中,并将它的高度和宽度設置1个最小全屏值具体方法二...

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

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

要想进一步提升网页打开速度,可以上传的图片优化入手。网页慢,无非是,一查询慢,二图片加载慢,三没有使用延迟加载,四图片数据太大。根据这些原因,逐步解决,从而提升用户体验。下面介绍一款插件Echo.js:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而...

发表评论