Vue를 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 구현하는 방법은 무엇입니까?-View.js-php.cn

Vue를 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 구현하는 방법은 무엇입니까?

王林

풀어 주다： 2023-06-25 09:00:15

원래의

1328명이 탐색했습니다.

웹사이트에서 이미지 사용은 매우 일반적이며, 이미지 로딩을 최적화하는 방법은 개발자의 초점 중 하나가 되었습니다. 중요한 최적화 중 하나는 이미지 지연 로딩입니다. 즉, 표시 영역의 이미지는 사용자가 웹 페이지를 스크롤할 때만 로드되고 스크롤되지 않은 영역에는 로드되지 않습니다. 사용자 경험.

Vue 프레임워크를 사용할 때 제공되는 지침을 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 쉽게 구현할 수 있습니다.

이미지 지연 로딩을 구현하려면 Vue-lazyload 라이브러리를 사용할 수 있습니다. 먼저 npm을 사용하여 라이브러리를 설치해야 합니다.

npm i vue-lazyload -S

로그인 후 복사

Vue의 항목 파일 main.js에 라이브러리를 도입하고 구성합니다.

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的宽高比，默认为 1，即 PhotoShop 中的 1:1
  error: 'path/to/error.png', // 当加载图片失败时的占位图
  loading: 'path/to/loading.gif', // 加载中时的占位图
  attempt: 1 // 图片加载的尝试次数
})

로그인 후 복사

그중 preLoad는 미리 로드된 가로 세로 비율을 지정합니다. 예를 들어 다음과 같이 설정하면 됩니다. 1.3으로 설정하면 이미지가 사전 로드될 때 너비는 대상 너비의 1.3배가 됩니다. 오류 및 로드는 각각 로드 실패 시 이미지 자리 표시자 이미지이고 로드 시도는 이미지 로드 시도 횟수입니다.

Lazy 로드해야 하는 이미지 위치에서 src 속성을 v-lazy 명령으로 바꿉니다: src 属性替换为 v-lazy 指令：

<img v-lazy="path/to/image.png">

로그인 후 복사

在页面中指定需要启用懒加载的区域：

<template>
  <div class="container">
    <div class="item" v-for="item in list">
      <img v-lazy="item.src"> <!-- 图片使用懒加载 -->
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: 'path/to/image-1.png',
          text: '图片 1'
        },
        {
          src: 'path/to/image-2.png',
          text: '图片 2'
        },
        {
          src: 'path/to/image-3.png',
          text: '图片 3'
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 启用懒加载
      this.$lazyload(this.$refs.container)
    })
  }
}
</script>

로그인 후 복사

上述代码在页面中循环展示一个图片列表，每个图片都使用了懒加载，同时在 mounted 钩子函数中指定启用懒加载的区域为 container

rrreee