图片懒加载

于 2024-04-28 16:12:59 发布
阅读量641 收藏 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
    评论
专栏目录
图片懒加载文件jquery插件库EasyLazyload
10-11
图片懒加载文件jquery插件库EasyLazyload
Vue之图片懒加载vue-lazyload
roydon
10-06 3452
v-lazyload
【vue】如何使用vue-lazyload实现图片懒加载
freeGameBox的博客
06-02 1352
vue-lazyload是一个简单易用的图片懒加载插件，它可以帮助我们提升网页性能和用户体验。它主要通过自定义指令v-lazy和IntersectionObserver API来实现懒加载的功能。我们只需要安装并引入插件，并在需要懒加载的元素上使用v-lazy指令即可。
Vue 图片懒加载 之 Vue-Lazyload、js原生实现原理
muzidigbig的博客
04-01 8906
通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。那什么叫做需要用到的时候 比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了 懒加载的优点 可以减少首页首次加载的数量，减少服务器的压力 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。 为什么使用懒加载 getBoundingClientRect()位置 IntersectionObserver
vue-lazyload 图片懒加载
m0_59795537的博客
01-17 527
vue-lazyload 图片懒加载 vue项目优化
vue + vue-lazyload 实现图片懒加载
wandoumm的博客
05-15 1278
1.安装1npm i vue-lazyload -S2.配置 main.js12345678910111213141516171819202122/***图片模板等懒加载 start ***/import VueLazyload from 'vue-lazyload'// 404图片import errImg from './assets/img/404.png'// loading图片impor...
angular实现图片懒加载实例代码
08-30
在Web开发中，图片懒加载是一种优化网页性能的技术，它允许图片在真正进入视口时才开始加载，从而减少页面初始化时的数据量和渲染时间。AngularJS，作为一个强大的前端框架，提供了多种实现图片懒加载的方法。本文将...
js实现图片懒加载效果
10-19
主要为大家详细介绍了js实现图片懒加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现图片懒加载的示例代码
08-28
微信小程序实现图片懒加载的示例代码 微信小程序实现图片懒加载的示例代码是指通过在页面预加载图片，提高用户体验度的一种技术。这种技术可以在微信小程序中实现，通过预加载图片，减少用户等待的时间，提高用户...
图片懒加载demo（仅供参考）
10-19
图片懒加载判断图片是否滚动到视图内，使用jquery.lazyload.js插件，还得大于五十个字，真麻烦随便凑凑字吧，仅供参考
原生JS实现图片懒加载之页面性能优化
10-17
图片懒加载是一种有效的优化策略，它能够显著提升用户体验，尤其是在处理大量图片的页面时。本文将深入探讨如何使用原生JavaScript实现图片懒加载，以及这种方式如何帮助优化页面性能。 一、图片懒加载原理 1. ...
详解性能更优越的小程序图片懒加载方式
01-03
懒加载或者可以说是延迟加载，针对非首屏或者用户”看不到”的地方延迟加载，有利于页面首屏加载速度快、节约了流量,用户体验好 实现方式 传统H5的懒加载方式都是通过监听页面的scroll事件来实现的，结合viewport的...
vue实现图片懒加载的方法分析
10-15
主要介绍了vue实现图片懒加载的方法,结合实例形式分析了vue.js图片懒加载插件安装、使用方法与相关操作注意事项,需要的朋友可以参考下
前端图片懒加载(lazyload)的实现方法(提高用户体验)
08-29
图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力,下面通过本文给大家分享图片懒加载lazyload的实现方法，感...
图片懒加载， Vue-Lazyload实现懒加载
nilmao的博客
03-21 2693
1.图片懒加载 1.1.什么是图片懒加载 图片懒加载 图片的懒加载就是在页面打开的时候，不要一次性全部显示页面所有的图片，而是只显示当前视口内的图片，一般在移动端使用（PC端主要是前端分页或者后端分页）。 优点：页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好； 1.2.为什么要使用懒加载？ 很多页面，内容很丰富且很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕，可能会等待较长的时间，没有丝滑的使用体验。 1.3.
vue-lazyload 图片懒加载的原理与使用
热门推荐
业余丰富各种技术栈
07-02 4万+
手把手教你在项目中实现图片懒加载，三步搞定
vue-lazyload的使用图片懒加载（vue组件的）
jieweiwujie的博客
07-18 321
图片懒加载（vue组件的）
js intersection 图片懒加载
最新发布
12-09
JS intersection 图片懒加载是一种网页优化技术，它通过监听图片元素和浏览器窗口的交叉区域来决定何时加载图片，以提高网页加载速度和性能。 当网页上有大量图片需要加载时，直接加载所有图片可能会导致网页加载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值