前言:图片是网站优化的一个重点,图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件,今天看了一下vue的图片懒加载插件 ---- vue-lazyload。
1. 安装:cnpm install vue-lazyload --save-dev(当然可以用npm或者yarn哦)
import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad, { preLoad: 1, error: require('./assets/img/error.jpg'), loading: require('./assets/img/homePage_top.jpg'), attempt: 2, })
3. lazyloadDemo.vue(页面中)使用:
<template> <div id="lazyload"> <!-- img中使用图片懒加载。 v-lazy代替v-bind:src --> <ul class="img"> <li v-for="(item,index) in imgList"> <img v-lazy="item" alt="" style=" 768px;"> </li> </ul> <!-- 背景图中使用图片懒加载。 v-lazy:background-image = "" --> <ul class="bgImg"> <li v-for="(item,index) in imgList" v-lazy:background-image="item"></li> </ul> </div> </template> <script> export default { name:'LazyLoadDemo', data(){ return{ imgList:[ require('../assets/img/1.jpg'), require('../assets/img/2.jpg'), require('../assets/img/3.jpg'), require('../assets/img/4.jpg'), require('../assets/img/5.jpg'), require('../assets/img/6.jpg'), require('../assets/img/7.jpg'), require('../assets/img/8.jpg'), require('../assets/img/9.jpg'), require('../assets/img/10.jpg'), require('../assets/img/11.jpg'), require('../assets/img/12.jpg'), require('../assets/img/13.jpg'), require('../assets/img/14.jpg'), require('../assets/img/15.jpg'), require('../assets/img/16.jpg'), require('../assets/img/17.jpg'), require('../assets/img/18.jpg'), require('../assets/img/19.jpg'), require('../assets/img/20.jpg'), ], } } } </script> <style lang="scss" scoped> #lazyload{ 768px; background-color: #fcc; margin: 0 auto; .img{ 768px; background-color: #fcc; } .bgImg{ li{ 768px; height: 522px; margin-bottom: 10px; background-repeat: no-repeat; //注意图片大小哦,否则可以显示不全 background-size: cover; } } } </style>
使用总结:
img标签中使用懒加载:v-lazy 代替 v-bind:src ;
背景图片中使用懒加载:v-lazy:background-image = "" ==>> 注意图片和盒子大小问题,否则显示可能有问题哦。
使用时最好给一个 key 属性,即:
<img v-lazy="图片地址" :key="图片地址">
:key="" 必须要加,否则就会出现,页面刷新,其他内容都刷新了,但是只有图片不刷新的情况 。因为key可能相同,所以页面不会更新!!!
官网解释:
原博客地址:https://blog.csdn.net/halo1416/article/details/81302419