vue-lazyload的使用

最新推荐文章于 2023-03-07 16:43:53 发布

转载最新推荐文章于 2023-03-07 16:43:53 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/maomao93/p/6830529.html

文章标签：

#javascript #ViewUI

本文介绍了如何在Vue项目中使用vue-lazyload插件来实现图片懒加载功能。包括安装依赖、配置全局参数及在组件中应用的方法。

https://www.npmjs.com/package/vue-lazyload

首先我们先在npm上下载vue-lazyload的包

npm install vue-lazyload --save

　　然后我们在main.js里面import这个包，当然，单单这一个包是不够的，还得其他的文件

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

　　然后我们配置vue-lazyload;

　　我是这样写的

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

　　官方给出的具体配置api可以看下图

然后在组件里写法是

<template>
	<div id="rj">
		<ul id="container">
      		<li v-for="img in list">
        		<img v-lazy="img">
      		</li>
		</ul>
	</div>
</template>
<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] {
    /*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>

　　这个是官方的写法，有兴趣的可以试试。

转载于:https://www.cnblogs.com/maomao93/p/6830529.html