Vue에서 이미지 지연 로딩을 구현하는 모범 사례

인터넷 기술이 지속적으로 발전하면서 웹 페이지 속도는 점차 사용자 경험에 영향을 미치는 주요 지표가 되었습니다. 웹페이지의 로딩 속도를 향상시키기 위해 우리는 일반적으로 이미지의 지연 로딩을 사용하는 것을 고려합니다. 이미지 지연 로딩은 페이지가 특정 위치로 스크롤될 때 이미지를 로딩하는 것을 의미합니다. 이렇게 하면 한 번에 많은 수의 이미지를 로딩하여 페이지 로딩이 너무 느려지는 문제를 피할 수 있습니다.

이 글에서는 Vue를 사용하여 이미지 지연 로딩을 구현하는 모범 사례를 소개합니다.

1. 타사 라이브러리 vue-lazyload 소개

Vue 프레임워크 자체는 이미지 지연 로딩 기능을 제공하지 않으므로 이를 구현하려면 타사 라이브러리를 사용해야 합니다. 일반적으로 사용되는 지연 로딩 라이브러리에는 vue-lazyload, lozad.js 등이 있습니다. 이 글에서는 vue-lazyload 라이브러리가 다음과 같은 특징을 가지고 있기 때문에 사용을 권장합니다:

1. 경량: vue-lazyload의 코드 크기는 gzip 압축 후 크기가 2KB에 불과할 정도로 매우 작습니다.
2. 적응형: vue-lazyload는 다양한 장치의 화면 크기에 따라 다양한 너비의 이미지를 로드하여 네트워크 리소스를 절약할 수 있습니다.
3. vue2 및 vue3 지원: vue-lazyload는 Vue 버전 2와 3을 모두 지원할 수 있습니다.

vue-lazyload 설치

npm 또는 Yarn을 사용하여 vue-lazyload를 설치할 수 있습니다:

npm install vue-lazyload

또는

yarn add vue-lazyload

Import vue-lazyload

Vue 항목 파일에서 vue-lazyload 라이브러리를 가져오고 전역적으로 등록 ：

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

Vue.use(VueLazyload)

2. 템플릿에서 지연 로드 명령을 사용하세요.

vue-lazyload 라이브러리를 사용한 후에는 템플릿에서 지연 로드 명령만 사용하여 이미지의 지연 로딩을 구현하면 됩니다. 사용법은 다음과 같습니다.

<template>
  <img src="/static/imghwm/default1.png"  data-src="占位符图片"  class="lazy"  v-lazy="imageURL" alt="图片说明">
</template>

그 중 imageURL은 이미지의 URL 주소를 나타내고, alt는 이미지 설명 텍스트를 나타냅니다.

이미지가 로드되기 전에 표시되는 것을 방지하려면 아래와 같이 img 태그에 이미지와 동일한 크기의 자리 표시자 이미지를 설정하는 것이 좋습니다.

<template>
  <img src="/static/imghwm/default1.png"  data-src="占位符图片"  class="lazy"  v-lazy="imageURL" alt="图片说明">
</template>

3. 지연 로드 구성

Vue의 항목 파일에서는 아래와 같이 vue-lazyload를 전역적으로 구성할 수 있습니다.

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

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例，默认为1.3
  error: '错误时显示的图片URL', // 图片加载失败时显示的图片
  loading: '加载中显示的图片URL', // 图片加载时显示的图片
  attempt: 1 // 图片加载失败后重新加载的次数，默认为1
})

그 중 preLoad는 이미지가 로드되기 시작할 때 화면 하단으로부터의 거리를 나타냅니다. 기본값은 1.3입니다. , 페이지 하단에 여전히 뭔가가 있습니다. 이미지는 현재 화면 높이의 1.3배 거리에서 로드되기 시작합니다. error는 이미지 로드에 실패했을 때 표시되는 이미지 주소를 나타내고, loading은 이미지 로드에 실패했을 때 표시되는 이미지 주소를 나타내고, try는 이미지 로드에 실패한 후 다시 로드한 횟수를 나타내며, 기본값은 1입니다.

4. 결론

이 글에서는 vue-lazyload 라이브러리를 사용하여 이미지 지연 로딩을 구현하는 모범 사례를 소개합니다. 이미지 지연 로딩을 구현하도록 지연 로드를 구성하면 페이지 로딩 속도와 사용자 경험을 효과적으로 향상시킬 수 있습니다. 마지막으로, 이미지 레이지 로딩을 사용할 때는 네트워크 리소스와 휴대폰 트래픽이 과도하게 소모되지 않도록 사전 로딩 거리와 로딩 시간을 적절하게 제어하는 ​​데에도 주의를 기울여야 한다는 점을 모두에게 상기시키고 싶습니다.

위 내용은 Vue에서 이미지 지연 로딩을 구현하는 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!