图片懒加载

最新推荐文章于 2024-08-22 11:06:05 发布

隔窗看世界

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量134

点赞数

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_73416102/article/details/128209461

版权

前端专栏收录该内容

18 篇文章 3 订阅

订阅专栏

实现原理两种方法

一种是用图片距离视口顶部高度(offsetTop等距离计算)
利用浏览器的构造函数IntersectionObserver

这里重点讲第二种

第二种方法的缺点是浏览器适配

第一种方法地址:js实现图片懒加载原理_tomorrownan的博客-CSDN博客_图片懒加载的实现原理

实现:

两者的原理相同,都是通过事先不加载图片data-src
当图片距离视口的高度达到想要的高度时,进行加载
进行加载---把data-src替换为scr
避免重复加载---判断图片是否加载完毕,加载完毕改变data-src
用的是IntersectionObserver就用其中的方法unobserve(image)不再监听

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy loading</title>
</head>
<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore sapiente maxime nulla, repellendus odio iste, perferendis dolore ut molestias nobis hic ipsam beatae culpa modi non consequatur soluta corrupti?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore sapiente maxime nulla, repellendus odio iste, perferendis dolore ut molestias nobis hic ipsam beatae culpa modi non consequatur soluta corrupti?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore sapiente maxime nulla, repellendus odio iste, perferendis dolore ut molestias nobis hic ipsam beatae culpa modi non consequatur soluta corrupti?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore sapiente maxime nulla, repellendus odio iste, perferendis dolore ut molestias nobis hic ipsam beatae culpa modi non consequatur soluta corrupti?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore sapiente maxime nulla, repellendus odio iste, perferendis dolore ut molestias nobis hic ipsam beatae culpa modi non consequatur soluta corrupti?</p>
  
  <img style="width: 100%;" data-src="./img/1_1.jpg" alt="">
  <img style="width: 100%;" data-src="./img/1_2.jpg" alt="">
  <img style="width: 100%;" data-src="./img/1_3.jpg" alt="">

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore sapiente maxime nulla, repellendus odio iste, perferendis dolore ut molestias nobis hic ipsam beatae culpa modi non consequatur soluta corrupti?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore sapiente maxime nulla, repellendus odio iste, perferendis dolore ut molestias nobis hic ipsam beatae culpa modi non consequatur soluta corrupti?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero tempore sapiente maxime nulla, repellendus odio iste, perferendis dolore ut molestias nobis hic ipsam beatae culpa modi non consequatur soluta corrupti?</p>

  <script src="./index.js"></script>
</body>
</html>

JS代码

// 声明常量 images就是img标签
const images = document.querySelectorAll('img')

// entries是数组,里面有一个属性isisIntersecting表示是否滚动动交叉区域
const callback = entries => {
  entries.forEach( entry => {
    if(entry.isIntersecting) {
      const image = entry.target
      const data_src = image.getAttribute( 'data-src' )
      image.setAttribute('src', data_src)
      // 在图片加载后,取消观察
      obsever.unobserve(image)
      console.log('触发')
    }
  })
}


// 这里的IntersectionObserver是浏览器的一个构造函数,用来监听视口
// 通过 InterSectionObserver造的对象来观察目标与视口是否有交叉，来决定是否让 img 有 src。
const observe = new IntersectionObserver(callback)

images.forEach( image => {
  observe.observe(image)
})