vue 图片懒加载 vue-lazyload

番茄西红柿发布于2019-04-23 13:20 / 2606人阅读

摘要：在项目中，如果出现大图一时半会加载不出来的情况确实很丑。如果是那种没有给定宽高靠图片撑起来的等图片加载出来再把内容挤下去的用户体验效果非常差。如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

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

在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 的一些属性函数，可以根据个人需要进行配置使用

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1735.html

Vue2.0仿今日头条

摘要：基于仿照今日头条的移动端项目源码地址预览地址前言先占个坑位。项目中还有许多可以完善的地方，不足之处希望小伙伴们可以，我会在这里更新。目前还没有全面地测试该项目，有问题提问，大家一起学习。 toutiao 基于Vue2.0仿照今日头条的移动端项目源码地址：toutiao_Vue2.0 预览地址：toutiao_Vue2.0 前言先占个坑位。之前打算做个东西熟悉vue的使用，由于...

pepperwang 2019-08-20 18:26 评论0 收藏0
react-lazy-load粗读

摘要：粗读近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下的库的实现。之先别关注，按他给注释说测试用。之是组件绑定事件时会触发的函数。 react-lazy-load粗读近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下 react-lazy-load 的库的实现。懒加载这里懒加载场景不是路由...

dailybird 2019-08-26 12:13 评论0 收藏0
Vue全家桶商城全站升级之引入HTTPS,PWA,错误监控,持续构建。

摘要：免费升级到升级到后，服务器可以开启版本，对比性能和缓存各方面要更好，还有其他新特性，可以启动功能，更好的进行离线缓存，更好的离线体验。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在线地址:https://fancy.czero.cn 手机扫描二维码查看: showImg(http...

zengdongbao 2019-08-23 10:22 评论0 收藏0
Vue 实现网易云音乐 WebApp

摘要：基于等开发一款移动端音乐，界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库，中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI ...

Karuru 2019-08-22 17:16 评论0 收藏0