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

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

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

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

npm i vue-lazyload -S

2. 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배가 됩니다. 오류 및 로드는 각각 로드 실패 시 이미지 자리 표시자 이미지이고 로드 시도는 이미지 로드 시도 횟수입니다.

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

<img  v-lazy="path/to/image.png" alt="Vue를 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 구현하는 방법은 무엇입니까?" >

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

<template>
  <div class="container">
    <div class="item" v-for="item in list">
      <img  v-lazy="item.src" alt="Vue를 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 구현하는 방법은 무엇입니까?" > <!-- 图片使用懒加载 -->
      <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

페이지에서 지연 로딩을 활성화해야 하는 영역을 지정합니다.
5. rrreee
위 코드는 페이지에 이미지 목록을 표시하기 위해 반복되며, 각 이미지는 지연 로딩을 사용하는 동시에 영역을 지정합니다. mounted 후크 함수에서 지연 로딩이 활성화된 위치 영역은 컨테이너 모듈이므로 이미지의 지연 로딩이 달성될 수 있습니다.
🎜 자리 표시자 이미지 제작과 관련하여 온라인 도구나 PhotoShop과 같은 도구를 사용하여 웹사이트 스타일에 맞는 자리 표시자 이미지를 만들 수 있습니다. 🎜🎜🎜위 단계를 통해 Vue에서 이미지 및 자리 표시자 이미지의 지연 로딩 효과를 쉽게 구현할 수 있으며, 이를 통해 웹사이트의 로딩 부담을 크게 줄이고 사용자 경험을 향상시킬 수 있습니다. 🎜

위 내용은 Vue를 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!