脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-lazyload图片延迟加载插件

vue-lazyload图片延迟加载插件的实例讲解

 更新时间：2018年02月09日 09:24:27   作者：longzhoufeng  
下面小编就为大家分享一篇vue-lazyload图片延迟加载插件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

1、首先在npm上下载vue-lazyload的引用包

npm install vue-lazyload --save-dev

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

import Vue from 'vue';
import App from './App.vue'
import router from './router';
import VueLazyload from "vue-lazyload"

3、然后我们配置vue-lazyload

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

4、具体配置api可以看下图

html

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

JS

<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] {
 /*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>

以上这篇vue-lazyload图片延迟加载插件的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • @vue/cli4.x版本的vue.config.js常用配置方式

    @vue/cli4.x版本的vue.config.js常用配置方式

    这篇文章主要介绍了@vue/cli4.x版本的vue.config.js常用配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • Vue路由守卫之路由独享守卫

    Vue路由守卫之路由独享守卫

    这篇文章主要介绍了Vue路由守卫之路由独享守卫的代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 浅谈Vuex的状态管理(全家桶)

    浅谈Vuex的状态管理(全家桶)

    本篇文章主要介绍了浅谈Vuex状态管理(全家桶)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 简单理解vue中Props属性

    简单理解vue中Props属性

    这篇文章主要帮助大家简单的理解vue中Props属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue3+ts+vite2项目实战踩坑记录

    vue3+ts+vite2项目实战踩坑记录

    最近尝试上手Vue3+TS+Vite,对比起Vue2有些不适应,但还是真香,下面这篇文章主要给大家介绍了关于vue3+ts+vite2项目的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue项目中props传值时子组件检测不到的问题及解决

    Vue项目中props传值时子组件检测不到的问题及解决

    这篇文章主要介绍了Vue项目中props传值时子组件检测不到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue中的data,computed,methods,created,mounted用法及说明

    vue中的data,computed,methods,created,mounted用法及说明

    这篇文章主要介绍了vue中的data,computed,methods,created,mounted用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • vue-router中query取值的坑及解决

    vue-router中query取值的坑及解决

    这篇文章主要介绍了vue-router中query取值的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue3+elementplus 树节点过滤功能实现

    vue3+elementplus 树节点过滤功能实现

    树节点所展示的街道是读取的成都市金牛区的范围边界线的json文件,街道下对应内容市通过fetch调用接口获取的内容,通过mapTreeData函数循环遍历,对数据进行处理,这篇文章主要介绍了vue3+elementplus 树节点过滤功能实现,需要的朋友可以参考下
    2024-05-05
  • Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    之前做项目的时候,使用了Collapse折叠面板,下面这篇文章主要给大家介绍了关于Vant UI中van-collapse下拉折叠面板默认展开第一项的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论