Use image lazy loading plug-in in vue-lazyload-JS Tutorial-php.cn

Use image lazy loading plug-in in vue-lazyload

亚连

Release： 2018-06-06 17:06:42

Original

2121 people have browsed it

Below I will share with you an example explanation of the vue-lazyload image delay loading plug-in. It has a good reference value and I hope it will be helpful to everyone.

1. First, download the reference package of vue-lazyload on npm

npm install vue-lazyload --save-dev

Copy after login

2. Then we go to main Import this package in .js. Of course, this package alone is not enough. You also need other files

import Vue from &#39;vue&#39;;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;;
import VueLazyload from "vue-lazyload"

Copy after login

3. Then we configure vue-lazyload

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

Copy after login

4. For specific configuration api, please see the picture below

html

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

Copy after login

<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>

Copy after login

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>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Cross-domain issues with proxyTable in the vue-cli project

How to use refs in React components

Detailed explanation of using devtool in webpack

The above is the detailed content of Use image lazy loading plug-in in vue-lazyload. For more information, please follow other related articles on the PHP Chinese website!