웹 프론트엔드 JS 튜토리얼 vue-lazyload 플러그인을 사용하여 vue에서 이미지를 지연 로드하세요.

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

Jan 04, 2018 am 09:40 AM
플러그인

이 글은 주로 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 &#39;vue&#39;
import App from &#39;./App.vue&#39;
import VueLazyload from &#39;vue-lazyload&#39; //引入这个懒加载插件

Vue.use(VueLazyload)

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

new Vue({
 el: &#39;body&#39;,
 components: {
  App
 }
})
로그인 후 복사

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


 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="&#39;/static/img/&#39; + item.productImage" 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: &#39;dist/error.png&#39;,
 loading: &#39;dist/loading.gif&#39;,
 attempt: 1,
 // the default is [&#39;scroll&#39;, &#39;wheel&#39;, &#39;mousewheel&#39;, &#39;resize&#39;, &#39;animationend&#39;, &#39;transitionend&#39;]
 listenEvents: [ &#39;scroll&#39; ]
})
로그인 후 복사
IntersectionObserver를 사용하여 이미지 지연 로딩을 구현하는 방법


사진의 느린 로딩

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PyCharm 초보자 가이드: 플러그인 설치에 대한 전반적인 이해! PyCharm 초보자 가이드: 플러그인 설치에 대한 전반적인 이해! Feb 25, 2024 pm 11:57 PM

PyCharm은 개발자가 코드를 보다 효율적으로 작성할 수 있도록 다양한 기능과 도구를 제공하는 강력하고 인기 있는 Python 통합 개발 환경(IDE)입니다. PyCharm의 플러그인 메커니즘은 기능을 확장하기 위한 강력한 도구입니다. 다양한 플러그인을 설치하면 PyCharm에 다양한 기능과 사용자 정의 기능을 추가할 수 있습니다. 따라서 PyCharm을 처음 접하는 사람이 플러그인을 이해하고 능숙하게 설치하는 것이 중요합니다. 이 문서에서는 PyCharm 플러그인의 전체 설치에 대해 자세히 소개합니다.

Illustrator에서 플러그인 로드 중 오류 발생 [수정됨] Illustrator에서 플러그인 로드 중 오류 발생 [수정됨] Feb 19, 2024 pm 12:00 PM

Adobe Illustrator를 시작할 때 플러그인 로딩 오류에 대한 메시지가 팝업됩니까? 일부 Illustrator 사용자는 응용 프로그램을 열 때 이 오류가 발생했습니다. 메시지 뒤에는 문제가 있는 플러그인 목록이 표시됩니다. 이 오류 메시지는 설치된 플러그인에 문제가 있음을 나타내지만 손상된 Visual C++ DLL 파일이나 손상된 기본 설정 파일과 같은 다른 이유로 인해 발생할 수도 있습니다. 이 오류가 발생하면 이 문서에서 문제 해결 방법을 안내하므로 아래 내용을 계속 읽어보세요. Illustrator에서 플러그인 로드 오류 Adobe Illustrator를 시작하려고 할 때 "플러그인 로드 오류" 오류 메시지가 표시되면 다음을 사용할 수 있습니다. 관리자로

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? Mar 08, 2024 am 08:55 AM

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? 일반적인 상황에서 Chrome 플러그인 확장의 기본 설치 디렉터리는 다음과 같습니다. 1. windowsxp에서 Chrome 플러그인의 기본 설치 디렉터리 위치: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Windows7의 Default\Extensions2.chrome 플러그인의 기본 설치 디렉터리 위치: C:\Users\username\AppData\Local\Google\Chrome\User

Edge 브라우저가 이 플러그인을 지원하지 않는 이유에 대한 세 가지 해결 방법을 공유하세요. Edge 브라우저가 이 플러그인을 지원하지 않는 이유에 대한 세 가지 해결 방법을 공유하세요. Mar 13, 2024 pm 04:34 PM

사용자가 Edge 브라우저를 사용할 때 더 많은 요구 사항을 충족하기 위해 일부 플러그인을 추가할 수 있습니다. 그런데 플러그인을 추가하면 해당 플러그인이 지원되지 않는다고 표시됩니다. 이 문제를 해결하는 방법은 무엇입니까? 오늘은 에디터가 세 가지 해결 방법을 알려드리겠습니다. 방법 1: 다른 브라우저를 사용해 보세요. 방법 2: 브라우저의 Flash Player가 오래되었거나 누락되어 플러그인이 지원되지 않을 수 있습니다. 공식 웹사이트에서 최신 버전을 다운로드할 수 있습니다. 방법 3: "Ctrl+Shift+Delete" 키를 동시에 누르세요. "데이터 지우기"를 클릭하고 브라우저를 다시 엽니다.

Stremio 자막이 작동하지 않습니다. 자막을 로드하는 중 오류가 발생했습니다. Stremio 자막이 작동하지 않습니다. 자막을 로드하는 중 오류가 발생했습니다. Feb 24, 2024 am 09:50 AM

Windows PC의 Stremio에서 자막이 작동하지 않습니까? 일부 Stremio 사용자는 동영상에 자막이 표시되지 않는다고 보고했습니다. 많은 사용자들이 "자막을 로드하는 중 오류가 발생했습니다."라는 오류 메시지가 나타났다고 보고했습니다. 이 오류와 함께 나타나는 전체 오류 메시지는 다음과 같습니다. 자막을 로드하는 동안 오류가 발생했습니다. 자막을 로드하지 못했습니다. 이는 사용 중인 플러그인이나 네트워크에 문제가 있을 수 있습니다. 오류 메시지에서 알 수 있듯이 인터넷 연결로 인해 오류가 발생할 수 있습니다. 따라서 네트워크 연결을 확인하고 인터넷이 제대로 작동하는지 확인하십시오. 이 외에도 충돌하는 자막 추가 기능, 특정 비디오 콘텐츠에 대해 지원되지 않는 자막, 오래된 Stremio 앱 등 이 오류의 다른 이유가 있을 수 있습니다. 좋다

PyCharm Community Edition은 충분한 플러그인을 지원합니까? PyCharm Community Edition은 충분한 플러그인을 지원합니까? Feb 20, 2024 pm 04:42 PM

PyCharm Community Edition은 충분한 플러그인을 지원합니까? 구체적인 코드 예제가 필요 소프트웨어 개발 분야에서 Python 언어가 점점 더 널리 사용됨에 따라 전문적인 Python 통합 개발 환경(IDE)인 PyCharm이 개발자들에게 선호되고 있습니다. PyCharm은 Professional 버전과 Community 버전의 두 가지 버전으로 나누어집니다. Community 버전은 무료로 제공되지만 Professional 버전에 비해 플러그인 지원이 제한됩니다. 그렇다면 문제는 PyCharm Community Edition이 충분한 플러그인을 지원하느냐는 것입니다. 이 기사에서는 특정 코드 예제를 사용하여

WordPress 플러그인을 사용하여 즉각적인 위치 지정 기능을 구현하는 방법 WordPress 플러그인을 사용하여 즉각적인 위치 지정 기능을 구현하는 방법 Sep 05, 2023 pm 04:51 PM

WordPress 플러그인을 사용하여 즉각적인 위치 기능을 구현하는 방법 모바일 장치의 인기로 인해 점점 더 많은 웹사이트가 위치정보 기반 서비스를 제공하기 시작했습니다. WordPress 웹사이트에서는 플러그인을 사용하여 즉각적인 위치 확인 기능을 구현하고 방문자에게 지리적 위치와 관련된 서비스를 제공할 수 있습니다. 1. 올바른 플러그인을 선택하세요. WordPress 플러그인 라이브러리에는 위치정보 서비스를 제공하는 플러그인이 많이 있습니다. 필요와 요구 사항에 따라 올바른 플러그인을 선택하는 것이 즉각적인 위치 지정 기능을 달성하는 열쇠입니다. 다음은 몇 가지입니다.

WordPress 플러그인에 WeChat 미니 프로그램 기능을 추가하는 방법 WordPress 플러그인에 WeChat 미니 프로그램 기능을 추가하는 방법 Sep 06, 2023 am 09:03 AM

WordPress 플러그인에 WeChat 미니 프로그램 기능을 추가하는 방법 WeChat 미니 프로그램의 인기와 인기로 인해 점점 더 많은 웹사이트와 애플리케이션이 WeChat 미니 프로그램과의 통합을 고려하기 시작했습니다. 콘텐츠 관리 시스템으로 WordPress를 사용하는 웹사이트의 경우 WeChat 애플릿 기능을 추가하면 사용자에게 더욱 편리한 액세스 경험과 더 많은 기능적 선택권을 제공할 수 있습니다. 이 기사에서는 WordPress 플러그인에 WeChat 미니 프로그램 기능을 추가하는 방법을 소개합니다. 1단계: WeChat 미니 프로그램 계정을 등록하세요. 먼저 WeChat 앱을 열어야 합니다.

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