echo.js图片懒加载

1.引入echo.js。
此处选择引入BootCDN静态资源库的路径。

<script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.min.js"></script>

2.在使用img标签时src设置为默认缓冲加载图片,添加data-echo属性,值设置为真实图片路径

<img src="assets/img/loading.gif" data-echo="http://ossweb-img.qq.com/upload/webplat/info/yxzj/20180315/17118634921981.jpg" width:640 height:480/>

真实图片:

17118634921981.jpg

预加载缓冲图片:
仁和logo懒加载640x360.gif

3.js初始化插件

<script>
echo.init({
    offset: 9999,
    throttle: 0
});
</script>

参数说明
offset 离可视区域多少像素的图片可以被加载
throttle 图片延迟多少毫秒加载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,881评论 18 139
  • 懒加载介绍: 通俗介绍:懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求。通俗的说就是你不要...
    BULL_DEBUG阅读 1,111评论 0 0
  • .bat脚本基本命令语法 目录 批处理的常见命令(未列举的命令还比较多,请查阅帮助信息) 1、REM 和 :: 2...
    庆庆庆庆庆阅读 8,192评论 1 19
  • 外面阴天,下着小雨,人也不舒服了,感冒了,去药店买了点药,正一口一口的喝着糖浆。人在心情抑郁时,总会在身体上体现出...
    ___So__阅读 154评论 0 0
  • 文/昊小洁 同学聚会是在变相提醒我们即将分别,仅此而已。 我不喜...
    昊小洁阅读 205评论 5 1