vue-lazyload에서 이미지 지연 로딩 플러그인 사용

이제 vue-lazyload 이미지 지연 로딩 플러그인에 대한 예제 설명을 공유하겠습니다. 이 플러그인은 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

1. 먼저 npm

npm install vue-lazyload --save-dev

2에서 vue-lazyload의 참조 패키지를 다운로드합니다. 물론 이 패키지만으로는 충분하지 않으며 다른 패키지도 있습니다.

import Vue from 'vue';
import App from './App.vue'
import router from './router';
import VueLazyload from "vue-lazyload"

3. 그런 다음 vue-lazyload

Vue.use(VueLazyload, {
error: 'static/error.png',//这个是请求失败后显示的图片
loading: 'static/loading.gif',//这个是加载的loading过渡效果
try: 2 // 这个是加载图片数量
})

4를 구성합니다. 아래 그림을 참조하세요

html

<template>
 <p>
  <ul id="container">
   <li v-for="img in list">
    <img v-lazy="img">
   </li>
  </ul>
 </p>
</template>

JS

<script>
 export default {
 data () {
  return {
    list: [
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
   ]
  }
 }
 }
</script>

css

<style>
//图片加载中...
img[lazy=loading] {
 /*width: 100px;*/
 background-position:center center!important;
 background: url("../../../static/images/loading.gif");
 background-size:100px 100px;
 background-repeat:no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
img[lazy=error] {
 /*width: 100px;*/
 background-position:center center!important;
 background: url("../../../static/images/error.png");
 background-size:100px 100px;
 background-repeat:no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
img[lazy=loaded] {
 /*width: 100px;*/
 background-position:center center!important;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-color: green;
}
/*
 or background-image
 */
 .yourclass[lazy=loading] {
 /*your style here*/
 }
 .yourclass[lazy=error] {
 /*your style here*/
 }
 .yourclass[lazy=loaded] {
 /*your style here*/
 }
</style>

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue-cli 프로젝트의 ProxyTable 도메인 간 문제

React 구성 요소에서 ref를 사용하는 방법

webpack에서 devtool 사용에 대한 자세한 설명

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