网站首页 文章专栏 最简单的图片懒加载类库的类库Echo.js教程
最简单的图片懒加载类库的类库Echo.js教程
编辑时间:2019-08-01 14:20 作者:小铨 浏览量:66


目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的技术,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度,今天,小文给大家介绍一个原生js懒加载类库Echo.js使用方法。

引入

引入Echo.js类库

1
 charset="utf-8" src="echo.js">

HTML

img标签引入图片写法

1
img src="default.gif" alt="pic" data-echo="pic.jpg" width="640" height="480">

这里需要注意,图片的宽高一定要定义。可以在css中定义~

JS

初始化

1
2
3
4
echo.init({
   offset:0,
   throttle:0
});

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

throttle:图片延迟多少毫秒加载

注意:这里echo第一个字母要小写,如果百度过这个类库的童鞋可能发现,文档写法是Echo.init,目前最新版的会报错找不到哦~

写在最后

这里需要注意一点,Echo.js 使用了 HTML5 的 data 属性,并且需要获取该属性的值,所以它并不兼容 IE6、IE7。

还有需要注意的是,在ajax或者其他情况,懒加载失效,可以用render()方法触发懒记载。

1
echo.render();

简简单单三步,你就已经将图片懒加载技术应用于自己的站点了,是不是很简单呢?运用懒加载技术后你可以发现,你的网站加载速度大大提升哦~



    出自:铨程互动

    地址:www.wuhequan.cn

    转载请注明出处!


来说两句吧
最新评论
0.072437s