Utiliser le plug-in de chargement différé d'image dans vue-lazyload-js tutoriel-php.cn

Utiliser le plug-in de chargement différé d'image dans vue-lazyload

亚连

Libérer： 2018-06-06 17:06:42

original

2097 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple du plug-in de chargement différé d'image vue-lazyload. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

1. Téléchargez d'abord le package de référence de vue-lazyload sur npm

npm install vue-lazyload --save-dev

Copier après la connexion

2. Importez ce package dans main.js Bien sûr, ce package seul ne suffit pas. Vous avez également besoin d'autres fichiers

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

Copier après la connexion

3. Ensuite, nous configurons vue. -lazyload

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

Copier après la connexion

4. L'API de configuration spécifique peut être vue dans l'image ci-dessous

<🎜. >

html

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Problèmes inter-domaines de ProxyTable dans le projet vue-cli

Comment utiliser les références dans les composants React

Explication détaillée de l'utilisation de devtool dans webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!