이제 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: [ 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', ] } } } </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 도메인 간 문제
webpack에서 devtool 사용에 대한 자세한 설명
위 내용은 vue-lazyload에서 이미지 지연 로딩 플러그인 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!