欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 图片懒加载 vue-lazyload

程序员文章站 2022-06-18 21:01:51
在项目中,如果出现大图一时半会加载不出来 的情况确实很丑。如果是那种没有给定宽高 靠图片撑起来的等图片加载出来 再把内容挤下去的用户体验效果非常差。 在vue中 使用vue-lazyload可以实现图片懒加载 安装 引用 main.js index.vue 还有就是全局配置的 main.js 使用 ......

在项目中,如果出现大图一时半会加载不出来 的情况确实很丑。如果是那种没有给定宽高 靠图片撑起来的等图片加载出来 再把内容挤下去的用户体验效果非常差。

在vue中 使用vue-lazyload可以实现图片懒加载

安装

npm install vue-lazyload --save

引用

main.js

import vuelazy from 'vue-lazyload'
vue.use(vuelazy)

index.vue

<template>
    <div>
        <img v-lazy="imgobj"/>
        <img v-lazy="imgurl"/>
    </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      imgobj: {
        src: require('https://images2015.cnblogs.com/blog/4849/201612/4849-20161223230947182-2121200217.png'),
        error: require('../assets/error.jpeg'),
        loading: require('../assets/loading.gif')
      },
      imgurl: 'http://xx.com/logo.png'
    }
  }
}
</script>

<style scoped>
</style>

还有就是全局配置的

main.js

import vuelazyload from 'vue-lazyload'

vue.use(vuelazyload)


vue.use(vuelazyload, {
  preload: 1.3,//
  error: '../assets/error.png',
  loading: '../assets/loading.gif',
  attempt: 1
})

使用

只是将v-bind:src 修改为 v-lazy 绑定图片路径

<img v-lazy="imgsrc" >

以下是github中 lazyload 的一些属性函数,可以根据个人需要进行配置使用 

vue 图片懒加载 vue-lazyload

 

 

 

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。