lazysizes-好用的延迟加载JS插件
2024-10-21 09:23:42
此插件可直接引入lazysizes即可
<script src="lazysizes.min.js"></script>
延迟加载(lazy load)是(也称为懒加载)Hibernate3关联关系对象默认的加载方式，延迟加载机制是为了避免一些无谓的性能开销而提出来的，所谓延迟加载就是当在真正需要数据的时候，才真正执行数据加载操作。
浏览器加载过程中，由于图片过多导致加载速度过慢，那么我们只需要在“看得见”的地方加载图片，而“看不见”的地方会跟随滚动条的滚动而加载。
此教程只针对于固定宽高的图片，详细请看 http://afarkas.github.io/lazysizes/#examples
step1 默认加载
<img data-src="moren.jpg" class="lazyload" width="500" height="500"/>
step2 从模糊到清晰
<img src="vague.jpg" data-src="clear.jpg" class="lazyload" width="" height=""/>
预先定义一张品质较差的图片，之后再通过懒加载展示品质高且清晰的图片。
step3 响应式图片
<img data-sizes="auto" class="lazyload" data-src="img500w.jpg" data-srcset="img240w.jpg 240w, img320w.jpg 320w,img500w.jpg 500w, img800w.jpg 800w, img1024w.jpg 1024w," /
在开发过程中，项目需要用到响应式布局，在移动端的情况下，我们不需要用到太过清晰的图片，以免造成用户流量的损失。
最新文章
- 阿里云 CentOS6.5 ssh连接慢的解决方案
- linux 相关快捷键
- [开源]基于STM32的录音播放装置
- 【Gym 100947E】Qwerty78 Trip（组合数取模/费马小定理）
- [译] Swift 的响应式编程
- PAT-乙级-1044. 火星数字(20)
- 【JPA】query新对象 需要 构造函数
- 这10篇 iOS 热文，你别错过哦
- 无法Debug SQL: Unable to start T-SQL Debugging. Could not attach to SQL Server process on
- 关于git提交、还原使用
- Json填充到Form中
- css3换行的三方式的对比（整理）
- Lambda表达式详解 （转）
- Deal with Warning: mysqli::__construct(): (HY000/2002)
- QT使用MSVC编译器输出中文乱码问题解决方法
- 爬虫--Scrapy-持久化存储操作2
- Oracle 11g DRCP配置与使用
- N皇后问题【递归求解】
- redis transactions(事务)
- Docker容器的自动化监控实现