图片懒加载

于 2024-04-28 16:12:59 发布
阅读量655 收藏 17
点赞数 27
分类专栏： 性能优化 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/www0925/article/details/138281994
版权

参考：https://blog.csdn.net/weixin_43913643/article/details/132975686

参考：https://blog.csdn.net/qq_44947815/article/details/125286969

图片懒加载是前端性能优化中的一项重要技术。它的核心思想是在页面加载时，只显示用户视口内的图片，而视口外的图片则等到它们即将进入视口时再进行加载。这样做可以显著提升页面的初始化渲染速度和用户体验。

总的来说，图片懒加载不仅能够提升页面加载速度，还能够减少服务器的压力和节省用户的带宽，尤其适合图片资源较多或者页面内容较长的网站。随着前端技术的不断发展，懒加载技术也在不断进化，以适应更多的场景和需求。

vue-lazyload插件

参考：https://blog.csdn.net/2301_76635548/article/details/131007819

要求： 需要给图片设置高度

注意： 用户在浏览器开启缓存禁用 或者 后端接口设置了no-cache 会导致图片加载2次。参考

Vue3实现：

  1. 安装vue-lazyload插件：

    npm install vue-lazyload --save-dev

  2. 全局main.js文件中引入并注册vue-lazyload：

    import VueLazyLoad from 'vue-lazyload'

const app = createApp(App)
app.use(VueLazyLoad, {
  // 可选配置项
  error: require('./assets/img/error.jpg'), // 加载失败时显示的图片
  loading: require('./assets/img/loading.gif'), // 加载中时显示的图片
  preLoad: 1.3, // 预加载高度的比例
  attempt: 3, // 尝试加载次数
})

  3. 使用指令：vue-lazyload提供了一个自定义指令v-lazy，我们可以在img标签或者任何需要设置背景图片的标签上使用它。例如：

    <template>
  <div>
    <!-- 懒加载img标签 -->
    <img
      v-for="n in 4"
      :key="n"
      v-lazy="getImageUrl(`/src/view/performance-optimization/lazy-images/assets/${n}.png`)"
      :alt="`Image ${n}`" />

    <!-- 懒加载背景图片 -->
    <div
      style="width: 100%; height: 100vh; background-size: cover"
      v-lazy:background-image="
        getImageUrl(`/src/view/performance-optimization/lazy-images/assets/5.png`)
      "></div>
  </div>
</template>

<script setup lang="ts">
  import { getImageUrl } from '@common/utils/images'
</script>

<style scoped>
  img {
    width: 100%;
    height: 100vh;
  }
</style>

    v-lazy指令接收一个字符串类型的值，表示图片的地址。如果是背景图片，需要在指令后加上:background-image修饰符

原理解析： vue-lazyload的核心原理是利用了IntersectionObserver API，这是一个用于检测元素是否与视口相交的API，它可以高效地监听元素的可见性变化，并触发回调函数。vue-lazyload在注册插件时，会创建一个全局的IntersectionObserver实例，并设置一些选项，如阈值（threshold）、根元素（root）等。然后，在绑定v-lazy指令时，会创建一个监听器（listener）对象，并将其添加到一个监听器队列（listenerQueue）中。每个监听器对象都包含了元素的相关信息，如状态（state）、图片地址（src）等。

接下来，vue-lazyload会遍历监听器队列，并调用IntersectionObserver实例的observe方法，将每个元素注册到观察者中。当元素与视口相交时，IntersectionObserver实例会触发回调函数，并传入一个entries参数，表示所有被观察的元素的状态信息。vue-lazyload会根据entries中的isIntersecting属性判断元素是否可见，如果是，则调用监听器对象的load方法，将元素的src或者style属性替换为真实的图片地址，并将该监听器对象从队列中移除。
——————————————

原文链接：https://blog.csdn.net/2301_76635548/article/details/131007819

IntersectionObserve / UseIntersectionObserver

API：IntersectionObserver - Web API 接口参考 | MDN

参考

原理：IntersectionObserver是浏览器原生提供的构造函数，使用它能省到大量的循环和判断。这个构造函数的作用是它能够观察可视窗口与目标元素产生的交叉区域。简单来说就是当用它观察我们的图片时，当图片出现或者消失在可视窗口，它都能知道并且会执行一个特殊的回调函数，就可以利用这个回调函数实现需要的操作。

new IntersectionObserver(([entry]) => {
  // entry 属性含义：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry
  // time: 时间戳，单位毫秒，表示观察者观察到元素的时刻
  // target: 被观察的元素，是一个DOM节点对象
  // rootBounds: 容器元素的矩形区域的信息。getBoundingClientRect() 方法的返回值，如果没有容器元素（即直接相对于视口滚动），则返回null
  // boundingClientRect: 目标元素的矩形区域的信息
  // intersectionRect: 目标元素与视口（或容器元素）的交叉区域的信息
  // intersectionRatio: 目标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1，完全不可见时小于等于 0
  // isIntersecting: 元素是否在可视区域内
  if (entry.isIntersecting) {
    setTimeout(() => {
      el.src = bind.value
    }, 2000)
    observer.unobserve(el)
  }
})
observer.observe(el)

技术思路：

  1. 检测图片位置：使用Intersection Observer API来判断图片是否进入视口。这是一种现代且高效的方式，它可以精确地知道元素何时出现在视口中。
  2. 设置标记：为需要懒加载的图片设置特定的标记，例如使用HTML5的自定义属性。
  3. 编写脚本：通过JavaScript编写脚本来控制图片的加载行为。当检测到图片进入视口时，脚本会触发图片的加载。
  4. 数据模拟：在实际应用中，还需要后端配合，实现图片的分页加载，以便在用户滚动页面时能够及时加载新的内容。

技术实现： 首先在HTML中为需要懒加载的图片添加了一个自定义属性data-src，用于存储图片的真实URL。然后，在JavaScript中，我们创建了一个Intersection Observer实例，并监听了所有带有data-src属性的图片元素。当这些图片元素进入视口时，我们会将它们的src属性设置为data-src属性的值，从而触发图片的加载。同时，为了避免重复加载已经加载过的图片，我们在加载完成后会取消对图片元素的观察。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载示例</title>
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <img data-src="image1.jpg" alt="Image 1">
        <img data-src="image2.jpg" alt="Image 2">
        <img data-src="image3.jpg" alt="Image 3">
        <!-- 更多图片 -->
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var observer = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        var img = entry.target;
                        img.src = img.dataset.src;
                        observer.unobserve(img);
                    }
                });
            });

            var images = document.querySelectorAll("img[data-src]");
            images.forEach(function(img) {
                observer.observe(img);
            });
        });
    </script>
</body>
</html>

Vue 局部自定义指令通过 IntersectionObserver实现：

<template>
  <div class="lazy-load-images-bg">
    <img
      v-for="n in 9"
      :key="n"
      v-lazy="getImageUrl(`/src/assets/images/full-screen/${n}.webp`)"
      :alt="`Image ${n}`" />
  </div>
</template>

<script setup lang="ts">
  import type { Directive } from 'vue'

  const getImageUrl = (url: string) => {
    return new URL(url, import.meta.url).href
  }

  // 图片懒加载：IntersectionObserver
  const vLazy: Directive<HTMLImageElement, string> = async (el, bind) => {
    const def = await import('@/assets/images/vue-logo.png')
    el.src = def.default
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        el.src = bind.value
        observer.unobserve(el)
      }
    })
    observer.observe(el)
  }
</script>

<style scoped lang="less">
  .lazy-load-images-bg {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  /* 注意：图片要设定宽高 */
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>

Vue 全局自定义指令通过 useIntersectionObserver 实现：

lazyLoad.ts

import { useIntersectionObserver } from '@vueuse/core'

export const lazyLoadImage = {
  install(app: any) {
    app.directive('lazy-image', {
      mounted(el: any, binding: any) {
        el.src = '@/assets/images/default.png'

        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
            stop()
          }
        })
      },
    })
  },
}

main.ts

import { lazyLoadImage } from '@/directive/lazyLoad'

const app = createApp(App)
app.use(lazyLoadImage)

<template>
  <div class="lazy-load-images-bg">
    <img
      v-for="n in 9"
      :key="n"
      v-lazy-image="getImageUrl(`/src/assets/images/full-screen/${n}.webp`)"
      :alt="`Image ${n}`" />
  </div>
</template>

<!-- 使用 v-lazy-image 自定义指令 -->
<script setup lang="ts">
  const getImageUrl = (url: string) => {
    return new URL(url, import.meta.url).href
  }
</script>

<style scoped lang="less">
  .lazy-load-images-bg {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  /* 注意：图片要设定宽高 */
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>

scroll 监听 + scrollTop+offsetTop+innerHeight

要求： 需要给图片设置高度

Vue3实现：

<template>
  <div class="container" ref="lazyImagesContainerRef" @scroll.passive="lazyLoadThrottle">
    <img
      v-for="n in 12"
      :key="n"
      :data-src="getImageUrl(`/src/view/performance-optimization/lazy-images/assets/${n}.png`)"
      :alt="`Image ${n}`" />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  
  /**
   * 获取本地静态资源
   * @param url 本地资源路径。注意：只能是绝对路径
   * @returns
   */
  export const getImageUrl = (url: string) => {
    return new URL(url, import.meta.url).href
  }

  /**
   * 节流
   * @param delay 单位 毫秒，延迟时间
   * @returns
   */
  const throttle = (cb: any, delay: number) => {
    let timer: any

    return () => {
      if (timer) {
        return false
      }

      timer = setTimeout(() => {
        cb && cb()
        clearTimeout(timer)
        timer = null
      }, delay)
    }
  }

  const lazyImagesContainerRef = ref(null)
  const lazyLoad = () => {
    // 浏览器可视区的高度
    const visibleAreaHeight =
      window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

    const bufferHeight = visibleAreaHeight / 2

    // 当前的滚动距离
    // 如果是body进行滚动
    // const scrollTop =
    //   document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
    const lazyImagesContainer = lazyImagesContainerRef.value as any
    const scrollTop = lazyImagesContainer.scrollTop

    const images: HTMLImageElement[] = lazyImagesContainer.querySelectorAll('img[data-src]')
    images.forEach(image => {
      // 图片距离顶部的高度
      const imgScrollTop = image.offsetTop

      if (imgScrollTop - bufferHeight <= scrollTop + visibleAreaHeight) {
        image.src = image.getAttribute('data-src') || ''
        // 性能优化：已经加载的不会再进行加载
        image.removeAttribute('data-src')
      }
    })
  }

  // 性能优化：使用节流
  const lazyLoadThrottle = throttle(lazyLoad, 500)

  onMounted(() => {
    // 用于首屏加载
    lazyLoad()
  })
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  img {
    width: 100%;
    height: 100vh;
  }
</style>

scroll 监听 + getBoundingClientRect()

API：Element.getBoundingClientRect() - Web API 接口参考 | MDN

const oBounding = image.getBoundingClientRect()

oBounding.top：元素上边到视窗上边的距离;
oBounding.right：元素右边到视窗左边的距离;
oBounding.bottom：元素下边到视窗上边的距离;
oBounding.left：元素左边到视窗左边的距离;
oBounding.width：元素自身的宽度
oBounding.height：元素自身的高度

在这里插入图片描述

要求： 需要给图片设置高度

注意： 挂载时 / 图片分页后 需要立刻调用lazyLoad函数，不然首屏不会加载

Vue3实现：

<template>
  <div class="container" ref="lazyImagesContainerRef" @scroll.passive="lazyLoadThrottle">
    <img
      v-for="n in 12"
      :key="n"
      :data-src="getImageUrl(`/src/view/performance-optimization/lazy-images/assets/${n}.png`)"
      :alt="`Image ${n}`" />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  
  /**
   * 获取本地静态资源
   * @param url 本地资源路径。注意：只能是绝对路径
   * @returns
   */
  export const getImageUrl = (url: string) => {
    return new URL(url, import.meta.url).href
  }

  /**
   * 节流
   * @param delay 单位 毫秒，延迟时间
   * @returns
   */
  const throttle = (cb: any, delay: number) => {
    let timer: any

    return () => {
      if (timer) {
        return false
      }

      timer = setTimeout(() => {
        cb && cb()
        clearTimeout(timer)
        timer = null
      }, delay)
    }
  }

  // 获取所有img标签
  const lazyImagesContainerRef = ref()
  const lazyLoad = () => {
    // 浏览器可视区的高度
    const visibleAreaHeight =
      window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

    const bufferHeight = visibleAreaHeight / 2

    const images: HTMLImageElement[] =
      (lazyImagesContainerRef.value as any).querySelectorAll('img[data-src]') || []
    images.forEach(image => {
      const oBounding = image.getBoundingClientRect() // 返回一个矩形对象，包含上下左右的偏移值

      if (oBounding.top - bufferHeight <= visibleAreaHeight) {
        image.src = image.getAttribute('data-src') || ''
        // 性能优化：已经加载的不会再进行加载
        image.removeAttribute('data-src')
      }
    })
  }

  // 性能优化：使用节流
  const lazyLoadThrottle = throttle(lazyLoad, 500)

  onMounted(() => {
    // 用于首屏加载
    lazyLoad()
  })
</script>

<style scoped>
  img {
    width: 100%;
    height: 100vh;
  }
</style>

HTML新增 loading属性：loading="lazy"

要求： 需要给图片设置高度

实现：

<template>
  <div>
    <img src="./assets/1.png" alt="`Image 1" loading="lazy" />
    <img src="./assets/2.png" alt="`Image 2" loading="lazy" />
    <img src="./assets/3.png" alt="`Image 3" loading="lazy" />
    <img src="./assets/4.png" alt="`Image 4" loading="lazy" />
    <img src="./assets/5.png" alt="`Image 5" loading="lazy" />
    <img src="./assets/6.png" alt="`Image 6" loading="lazy" />
    <img src="./assets/7.png" alt="`Image 7" loading="lazy" />
    <img src="./assets/8.png" alt="`Image 8" loading="lazy" />
  </div>
</template>

<style scoped>
  img {
    width: 100%;
    height: 100vh;
  }
</style>

属性：

auto：浏览器默认的懒加载策略，和不增加这个属性的表现一样

lazy：在资源距当前视窗到了特定距离内后再开始加载

eager：立即加载，无论资源在页面中什么位置

兼容性：
在这里插入图片描述

wei-vivian
关注
  • 27
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片的懒加载
weixin_45792464的博客
07-18 720
懒加载
图片懒加载 vue-lazyload
qq_41985405的博客
12-20 250
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。 npm install vue-lazyload --save import VueLazyLoad from 'vue-lazyload Vue.use(VueLazyload) <template> <div id="lazyload"> <ul> <li v-for="item in
图片懒加载与预加载
qq_47218954的博客
02-20 428
js实现图片懒加载、预加载
javascript 图片 懒加载、预加载
ssisse的博客
06-13 3286
懒加载与预加载的基本概念。  懒加载也叫延迟加载：前一篇文章有介绍：JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。  预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。  两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。  懒加载的意义及实现方式有：   懒加载的主
图片预加载和懒加载的多种方法
mkbird的博客
05-04 1638
图片预加载和懒加载 图片懒加载 在渲染页面的时候，先将图片用一张默认图片代替，当图片到达浏览器可视区域时，才显示真实的图片。 这样的好处是，可以减缓服务器负担，加快初始界面的渲染速度。 实现方式： 使用setTimeOut或setInterval定时器进行延迟加载 条件加载，符合条件或触发事件后再进行异步下载 通过滚动条监听用户距图片距离，快要到达之前进行加载 // 通过滚动条监听用户距图片距离，到达进行加载 let img = document.querySelector('img')
图片懒加载文件jquery插件库EasyLazyload
10-11
图片懒加载是一种优化网页性能的技术，它在网页加载时并不会一次性加载所有图片，而是等到用户滚动页面，即将看到这些图片时才开始加载。这样可以显著减少初始页面加载时间，提高用户体验，特别是对于拥有大量图片的...
懒加载-预加载精简解读
我的博客
05-24 389
1.在云相册页面存在多张图片，一次性加载会出现页面中图片短暂白屏的问题，为了解决这个问题，使用懒加载来处理；核心思路：使用html5中的 data-image 属性将图片的链接先绑定在元素身上，当检测到当前页的可视区域即将滚动到该元素时，将data-image注入到background-image上，在屏幕的scroll和resize事件上将该函数绑定；核心代码如下://按照需求加载 var fn...
vue-lazyload图片懒加载
qq_34082921的博客
10-13 99
图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。
【vue】如何使用vue-lazyload实现图片懒加载
freeGameBox的博客
06-02 1361
vue-lazyload是一个简单易用的图片懒加载插件，它可以帮助我们提升网页性能和用户体验。它主要通过自定义指令v-lazy和IntersectionObserver API来实现懒加载的功能。我们只需要安装并引入插件，并在需要懒加载的元素上使用v-lazy指令即可。
Vue 图片懒加载 之 Vue-Lazyload、js原生实现原理
muzidigbig的博客
04-01 9271
通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。那什么叫做需要用到的时候 比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了 懒加载的优点 可以减少首页首次加载的数量，减少服务器的压力 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。 为什么使用懒加载 getBoundingClientRect()位置 IntersectionObserver
vue-lazyload 图片懒加载
m0_59795537的博客
01-17 529
vue-lazyload 图片懒加载 vue项目优化
图片的预加载和懒加载
zy_lalala的博客
02-22 1646
图片的预加载和懒加载
vue-lazyload 图片懒加载的原理与使用
热门推荐
业余丰富各种技术栈
07-02 4万+
手把手教你在项目中实现图片懒加载，三步搞定
vue-lazyload图片懒加载实战
bboyjoe的博客
05-24 3万+
插件地址：vue-lazyload 以下做一个最简答的示例： img{ border: none; } img[src=""]{ opacity: 0; } .logo{ width: 0.5rem;
vue-lazyload的使用图片懒加载（vue组件的）
jieweiwujie的博客
07-18 327
图片懒加载（vue组件的）
vue-lazyload实现图片懒加载
chen_ac的博客
07-04 542
vue-lazyload实现图片懒加载 1. 在终端通过npm工具下载安装vue-lazyload图片懒加载插件 npm install vue-lazyload --save 2. 在项目的mian.js文件中导入插件 import VueLazyLoad from 'vue-lazyload'; 3. 通过Vue.use()使用插件 // 使用图片懒加载插件 Vue.use(VueLazyLoad); 4. 在组件中通过v-lazy=“”方式加载图片 <img v-lazy="showIma
vue图片懒加载lazy-load
前端那点事的博客
10-30 4510
第一步安装 npm i vue-lazyload -D 第二步引入 import VueLazyload from 'vue-lazyload' 第三步简单配置参数（两种图片路径方法） //最外层static目录下的图片引用 Vue.use(VueLazyload,{ error:'/static/images/logo.png',//图片加载失败时候显示的图片 loading...
js intersection 图片懒加载
最新发布
12-09
JS intersection 图片懒加载是一种网页优化技术，它通过监听图片元素和浏览器窗口的交叉区域来决定何时加载图片，以提高网页加载速度和性能。 当网页上有大量图片需要加载时，直接加载所有图片可能会导致网页加载速度变慢，影响用户体验。而使用JS intersection 图片懒加载技术则可以解决这个问题。它的原理是在网页初始化时，并不加载所有图片，而是只加载窗口可见区域内的图片，当用户滚动页面，有图片出现在可见区域时再加载相应的图片。 这项技术的核心是利用Intersection Observer API来监听图片元素与浏览器窗口的交叉区域，当图片元素进入交叉区域时触发加载图片的操作。这样可以避免在页面初始化时加载所有图片，减少了不必要的网络请求和资源消耗，提升了网页的加载速度和性能。 使用JS intersection 图片懒加载技术可以有效减少网页的加载时间，提升用户体验。同时也能减轻服务器和网络的压力，降低成本。因此，这是一种非常实用和有效的网页优化技术，已经被广泛应用于各大网站和应用中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值