html中如何实现懒加载
小编给大家分享一下html中如何实现懒加载,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
兴庆ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!
优势
性能收益:浏览器加载图片、decode、渲染都需要耗费资源,懒加载能节约性能消耗,缩短onload事件时间。
节约带宽:这个不需要解释。
通常,我们在html中展示图片,会有两种方式:
img 标签
css background-image
img的懒加载实现
img有两种方式实现懒加载:
事件监听(scroll、resize、orientationChange)
event -->
Intersection Observer(兼容性问题)
observer -->
background-image的实现
background-image的实现跟img的原理基本是一样的,区别是在对class的处理上:
background
渐进式懒加载
渐进式懒加载,指的是存在降级处理,通常html形式如下:
这样的代码会有2个好处:
如果js执行失败,可以点击预览
大小与实际图一致的占位data URI,避免reflow
最终的代码如下:
progressive
以上是html中如何实现懒加载的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前标题:html中如何实现懒加载
文章起源:http://pwwzsj.com/article/gdgpsd.html