vue.js에서 지연 로딩을 사용하는 방법

vue.js는 지연 로딩 방법을 사용합니다. 먼저 지연 로드를 설치한 다음 [main.js]에서 전역적으로 참조하고 이미지를 구성합니다. 마지막으로 vue에서 지연 로딩이 필요한 이미지 바인딩 [v-bind:src]를 수정합니다. file【v-lazy】입니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 글: vue.js】

vue.js는 지연 로딩 방식을 사용합니다:

1.lazyload

npm install lazyload -s

2를 설치하고 main.js에서 전역적으로 참조하고 이미지를 구성하세요

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload) //默认配置
// 或者是自己配置预加载图片
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

3 . vue 파일에서 지연 로드해야 하는 이미지의 v-bind:src를 v-lazy

<img v-lazy="&#39;@/assets/images/27.png&#39;" class="images-line">

4로 변경합니다. 지연 로드가 상대 경로로 이미지를 참조하지 못합니까? 작업에는 참조 사진이 필요합니다

<img v-lazy="require(&#39;@/assets/images/eight.png&#39;)" class="eight-top">

관련 무료 학습 권장 사항: JavaScript(비디오)

위 내용은 vue.js에서 지연 로딩을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!