持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

前言

什么是图片懒加载？图片懒加载其实就是延迟加载，我们知道浏览器的可视范围是有限的，而且现在网页内容越来越丰富，一般网页的内容都是需要进行滚动才能完成浏览，如果网页有很多图片，而图片是非常吃流量的，如果用户还没看见网页下面的内容，我们就没有必要这么快加载这些暂时看不见的图片

scroll事件监听

既然要滚动才能看见那些看不见的图片，因此我们第一个要介绍的方法是事件监听，监听scroll这个事件，鼠标滚动就会触发。我们得需要知道2个高度，一个是视口，也就是窗口显示区域的高度，可以用window.innerHeight获取，另一个是图片到视口上边的距离，可以用元素的getBoundingClientRect()获取,那我们如何实现呢？

html

html部分我们放入几张图片，放在浏览器视口的下面，让浏览器看不见图片

<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>

<img src="xxxxxx" alt="">
<img src="xxxxxx" alt="">
<img src="xxxxxx" alt="">

<p>...</p>
<p>...</p>
<p>...</p>

js

懒加载首先要获取图片元素

const imgs=document.querySelectorAll('img')

然后监听scroll滚动事件，每次滚动的时候判断图片的位置是否出现在可视区域内，如果图片距离视口顶部距离小于窗口显示区高度，就可以使图片开始进行加载

window.addEventListener('scroll',(e)=>{
  imgs.forEach(e=>{
    const imgTop=e.getBoundingClientRect().top//获取每张图片到顶部的距离
    if(imgTop<window.innerHeight){
      //加载图片操作
    }
  })
})

我们需要在滚动到可视区域的时候才加载图片，于是给图片加上自定义属性data-*，浏览器遇到这个属性不会进行处理，图片也就出不来了，所以将图片的src都改为data-src

当图片距离视口顶部距离小于窗口显示区高度的时候获取刚刚自定义的属性，再把这个自定义属性赋值给原本的src属性

const data_src=image.getAttribute('data-src')
image.setAttribute('src',data_src)

我们在浏览器打开控制台的network面板，勾选disable cache禁止缓存，设置3g网络来模拟网络环境变慢

看效果，图片不在可视区域内图片没有加载，滚动到图片区域，图片才加载出来，基本实现了图片懒加载的功能

javascript图片懒加载

前言

scroll事件监听

html

js