懒加载实现的方法有哪些？（三种方法介绍）

优势

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

最终的代码如下：

现成库

推荐下面这个库，使用非常简单：https://www.npmjs.com/package/lozad

以上就是懒加载实现的方法有哪些？（三种方法介绍）的详细内容，更多请关注 第一PHP社区 其它相关文章！