建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS图片懒加载|响应式延迟加载插件lazysizes.js

来源:易助科技网浏览量:30收藏

简介


通过 lazysizes.js 插件能很好解决图片延迟加载问题,它可以实现图片的延迟加载,也就是说,当网页很长时,只加载用户视窗内的图片,而视窗外的图片会等到你拖动滚动条至后面才加载。这样就有效避免了图片过度网站加载慢的问题了,能够提升整个网站的访问速度和用户体验,特别是网站的图片比较多的站点。

使用 lazysizes.js 插件,不需要引用其他三方 js 库,直接使用即可,能很方便的集成到我们项目中,而且该插件体积大约 5.8KB,很轻量级。在响应式布局、移动端开发时,增强用户体验,免造成用户流量的损失。



使用


1.  引入文件


< script  src="lazysizes.min.js"  async=""></ script >


2.  用法示例

lazysizes不需要任何JS配置,只需要在img标签中添加class="lazyload"就可以了,目前lazysizes支持四种懒加载方式,如下:

1. 无响应默认加载


<img data-src="img.jpg" class="lazyload"  width="500" height="500"/>


2. 从模糊到清晰的加载


<img src="vague.jpg" data-src="clear.jpg" class="lazyload" width="500" height="500"/>


3. 响应式加载


<imgdata-sizes="auto"data-src="image2.jpg"data-srcset="image1.jpg 300w,image2.jpg 600w,image3.jpg 900w" class="lazyload" />


4. iframe 的方式


<iframe frameborder="0″class="lazyload"allowfullscreen=""data-src="//"></iframe>



相关链接


官方文档地址 : https://github.com/aFarkas/lazysizes#readme

GitHub 地址 :  https://github.com/topics/lazysizes

npm 地址 :  https://www.npmjs.com/package/lazysizes