간단 한 vue.js 그림 lazyload 플러그 인 인 인 스 턴 스 공유

2493 단어 vue
이 플러그 인 은 압축 되 지 않 은 버 전 은 7.62kb 로 간소화 되 어 있 으 며,img 태그 와 background-img 자원 을 지원 하 는 lazyload 입 니 다.vue.js 1.0 과 vue.js 2.0 지원
안 전

$ npm install vue-lazyload --save
사용 방법

//main.js

import Vue from 'vue'
// import VueLazyload
import VueLazyload from 'vue-lazyload'

//use custom directive
Vue.use(VueLazyload)

// use options
Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1
})

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


<!--your.vue-->
<script>
export default {
 data () {
  return {
   list: [
    'your_images_url', 
    'your_images_url', 
    // you can customer any image's placeholder while loading or load failed
    {
     src: 'your_images_url.png',
     error: 'another-error.png',
     loading: 'another-loading-spin.svg'
    }
   ]
  }
 }
}
</script>

<template>
 <div class="img-list">
  <ul id="container">
   <li v-for="img in list">
    <img v-lazy="img">
   </li>
  </ul>
 </div>
</template>
모든 로 딩 과 로 딩 실패 로 불 러 오 는 데 성공 한 스타일 을 맞 출 수 있 습 니 다.

<style>
 img[lazy=loading] {
  /*your style here*/
 }
 img[lazy=error] {
  /*your style here*/
 },
 img[lazy=loaded] {
  /*your style here*/
 }
 /*
 or background-image
 */
 .yourclass[lazy=loading] {
  /*your style here*/
 }
 .yourclass[lazy=error] {
  /*your style here*/
 },
 .yourclass[lazy=loaded] {
  /*your style here*/
 }
</style>
API
Options
params
type
detail
preLoad
Number
proportion of pre-loading height
error
String
error img src
loading
String
loading img src
attempt
Number
attempts count
demo 다운로드 주소:vue-lazyloadz_jb51.rar
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
php 위 챗 결제 인터페이스 개발 프로그램
yii 의 입구 파일 index.php 에 왜 이 두 마디 가 있 습 니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage