html中如何实现懒加载

小编给大家分享一下html中如何实现懒加载，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

兴庆ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

优势

1. 性能收益：浏览器加载图片、decode、渲染都需要耗费资源，懒加载能节约性能消耗，缩短onload事件时间。

2. 节约带宽：这个不需要解释。

通常，我们在html中展示图片，会有两种方式：

1. img 标签

2. css background-image

img的懒加载实现

img有两种方式实现懒加载：

1. 事件监听(scroll、resize、orientationChange)

    
    
    
    
    


    
    
    
    
     -->
    
    
    
    
    
    
    
    

1. Intersection Observer（兼容性问题）

    
    
    
    
    


    
     -->
    
    
    
    
    
    
    
    
    
    
    

background-image的实现

background-image的实现跟img的原理基本是一样的，区别是在对class的处理上：

渐进式懒加载

渐进式懒加载，指的是存在降级处理，通常html形式如下：

这样的代码会有2个好处：

1. 如果js执行失败，可以点击预览

2. 大小与实际图一致的占位data URI，避免reflow

最终的代码如下：

以上是html中如何实现懒加载的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！