html中如何实现懒加载-创新互联

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

优势

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。