通过IntersectionObserver实现图片懒加载功能

图片懒加载是日常开发会经常使用的一个功能,但是在日常中可能使用v-lazy便直接实现了图片懒加载,现在想通过原生js来实现一下图片懒加载的功能.

首先来介绍一下IntersectionObserver,这个在MDN中有十分详细的介绍.可以直接去看原文.这里简单介绍一下他的用法.

IntersectionObserver

IntersectionObserver 是一个 JavaScript 的 API，用于观察目标元素与其祖先元素或视窗（viewport）之间的交叉状态。它能够提供一种高效的方式来检测目标元素是否进入或离开视窗，或者与其父元素发生交叉，从而实现懒加载、无限滚动、动态加载等功能。IntersectionObserver API 在现代浏览器中得到广泛支持。

属性：

1. IntersectionObserver.root：表示根元素（root）的可见区域。它是一个 Document 对象的引用。默认情况下，根元素为视窗（viewport）。你可以指定一个特定的元素，使其成为观察器的根元素。如果未指定，则默认为视窗。

2. IntersectionObserver.rootMargin：用于扩展或缩小根元素的可见区域。它是一个字符串，类似于 CSS 的 margin 属性，可以包含像素值或百分比值。例如，"10px 20px 30px 40px" 或者 "5% 10%"。这个属性用于扩大或缩小根元素的可见区域，使得在进入或离开视窗之前，目标元素需要提前或推迟一定的距离。

3. IntersectionObserver.thresholds：一个数组，表示触发 IntersectionObserver 回调的交叉阈值。交叉阈值是一个介于 0 和 1 之间的值，表示目标元素可见区域与根元素可见区域相交的百分比。当目标元素的可见区域与根元素的可见区域相交达到或超过阈值时，会触发回调函数。默认情况下，阈值为 [0]，表示目标元素有任何部分进入可见区域时都会触发回调。你可以自定义多个阈值，以实现更精确的触发条件。

方法：

1. IntersectionObserver.observe(target: Element)：将一个目标元素添加到 IntersectionObserver 中进行观察。当目标元素的交叉状态满足设定的条件时，会触发 IntersectionObserver 的回调函数。

2. IntersectionObserver.unobserve(target: Element)：停止对指定目标元素的观察，即使目标元素的交叉状态满足条件，也不会触发 IntersectionObserver 的回调函数。

3. IntersectionObserver.disconnect()：停止对所有目标元素的观察，调用该方法后，即使目标元素的交叉状态发生变化，也不会触发 IntersectionObserver 的回调函数。

4. IntersectionObserver.takeRecords()：返回一个包含所有观察目标元素的 IntersectionObserverEntry 对象数组。每个 IntersectionObserverEntry 对象包含目标元素的交叉状态信息，如可见区域的大小和位置等。

简单实现

图片获取:

// globEager是静态加载模式
// glob是懒加载模式
// let imgList=import.meta.glob('./assets/*.*',{eager:true}) ----便是静态加载模式
let imgList:Record<string,{default:string}>=import.meta.glob('./assets/*.*',{eager:true})
let arr=Object.values(imgList).map((item:any)=>item.default)
console.log(arr);

在很多时候,获取图片列表的方式都是将图片路径添加到一个数组中,进行获取,十分繁琐,而上面的这种方式相对而言要简单很多.import.meta.glob和import.meta.globEager两种方式大同小异,但是import.meta.glob这种可以直接实现图片懒加载引入,而后面那种则是通过静态资源的方式将图片进行引入.这便是这两种方式的区别.由于在这个dome中要实现图片懒加载,所以是使用的是第二种方式引入(在第一种方式加一个{eager:true}便可以达到第二种引入方式的效果).

先来看看imgList的输出结果:

 

可以很明显的看到default就是图片的路径,那么只需要将其获取即可

let arr=Object.values(imgList).map((item:any)=>item.default)

因为返回的是一个对象,所以便可以使用Object.values来获取到value,再通过map遍历的方式获取到其default值

 

从而便获得了其路径,这种获取路径的方式还是比较轻松,且方便的.

再解决完图片问题之后,便是懒加载部分的实现了.

懒加载实现:

关于IntersectionObserver的属性和方法在前面也简单的介绍了.同时也附上了MDN相关链接.这里便不会再去赘述了.

相关代码展示:

let vLazy:Directive<HTMLImageElement,string>=async (el,binging)=>{
  const def=await import('./assets/vue.svg')
  el.src=def.default
  console.log(el);
  const observer=new IntersectionObserver(enr=>{
    console.log(enr[0]);
    if(enr[0].intersectionRatio>0){
      setTimeout(()=>{
        el.src=binging.value
      },2000)
      observer.unobserve(el)
    }
    
  })
  observer.observe(el)
  
}

在对于前面属性和方法的了解的加持下,看这段代码属实不难.其中定时器只是为了更好的去呈现懒加载的这个过程.

上述代码中,通过使用vue的矢量图来作为默认图片,当未加载时,展示这张图.看函数主体:

enr所返回的就是每一个图片所返回的IntersectionObserver

因为只添加了三张图片所以返回了三个对象,而所需要关注的就是intersectionRatio这个属性,当它大于0时,便会将图片路径更换为指定路径,从而实现了图片懒加载,当然在实现这一功能之后,也要关闭observer.unobserve(el),不然会一直关注这一个.

 

整体代码呈现:

<template>
<div >
  <div class="card">
    <img v-lazy="item" v-for="(item,index) in arr" :src="item" :key="index" alt="" width="360" height="500" >
  </div>
</div>
</template>
​
<script setup lang='ts'>
import HelloWorld from './components/HelloWorld.vue';
import type {Directive } from 'vue'
// globEager是静态加载模式
// glob是懒加载模式
// let imgList=import.meta.glob('./assets/*.*',{eager:true}) ----便是静态加载模式
let imgList:Record<string,{default:string}>=import.meta.glob('./assets/*.*',{eager:true})
let arr=Object.values(imgList).map((item:any)=>item.default)
console.log(arr);
let vLazy:Directive<HTMLImageElement,string>=async (el,binging)=>{
  const def=await import('./assets/vue.svg')
  el.src=def.default
  console.log(el);
  const observer=new IntersectionObserver(enr=>{
    console.log(enr[0]);
    if(enr[0].intersectionRatio>0){
      setTimeout(()=>{
        el.src=binging.value
      },2000)
      observer.unobserve(el)
    }
    
  })
  observer.observe(el)
  
}
</script>