vue-lazyload 플러그인을 사용하여 vue에서 이미지를 지연 로드하세요.

이 글은 주로 Vue에서 이미지를 지연 로드하기 위한 vue-lazyload 플러그인에 대한 자세한 가이드를 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

vue에서 이미지 레이지 로딩 사용에 대한 자세한 가이드를 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

지침

네트워크 요청이 상대적으로 느린 경우, 이 이미지에 미리 낮은 픽셀의 자리 표시자 이미지를 추가하여 함께 쌓이거나 큰 공백이 표시되지 않도록 하세요. 사용자 경험을 조금 더 좋게 만듭니다.

Case

demo: 지연 로딩 케이스 데모

설치 설치 방법

npm

$ npm i vue-lazyload -D

CDN

CDN https:// unpkg.com/vue-lazyload /vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
 Vue.use(VueLazyload)
 ...
</script>

Usage

main.js 항목 파일에서

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' //引入这个懒加载插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1
})

new Vue({
 el: 'body',
 components: {
  App
 }
})

항목 파일을 추가한 후 구성 요소의 어느 곳에서나 img의 src를 직접 사용할 수 있습니다. > v-lazy

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img src="/static/imghwm/default1.png"  data-src="&#39;/static/img/&#39; + item.productImage"  class="lazy"  : alt=""></a>
</p>

이전 프로젝트의 img 태그에 있는 :src 속성을 v-lazy

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

매개변수 옵션 설명

으로 변경합니다. ㅋㅋㅋ 돔 이벤트를 트리거합니다throttle waitIntersectionObserver 사용IntersectionObserver 옵션듣고 싶은 이벤트리스너의 이름을 전달하여 vue-lazyload를 사용하고 싶은 이벤트를 구성할 수 있습니다.

Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1,
 // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
 listenEvents: [ 'scroll' ]
})

key	description	default	options
preLoad	미리 로딩 높이의 비율	1.3	Number
error	이미지 로딩이 실패할 때	'src'	String
로딩 중	이미지가 성공적으로 로드되면	'src'	String
attempt	Attempt count	3	Number
listenEvents	듣고 싶은 이벤트	['스크롤' , 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	요소 속성을 동적으로 수정	{ }	요소 어댑터
false	Boolean		throttleWait
200	Number		observer
false	Boolean		observerOptions
{ rootMargin: '0px', 임계값 : 0.1 }	IntersectionObserver
	배열
이 플러그인 로딩을 재설정하는 데 문제가 있는 경우 유용합니다	관련 권장 사항:		이미지 지연 로딩 imgLazyLoading.js 자세한 설명

IntersectionObserver를 사용하여 이미지 지연 로딩을 구현하는 방법

사진의 느린 로딩

위 내용은 vue-lazyload 플러그인을 사용하여 vue에서 이미지를 지연 로드하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!