使用Mint-UI lazyload 懒加载图片js的配置

最新推荐文章于 2024-04-04 09:36:40 发布

爱倒腾

最新推荐文章于 2024-04-04 09:36:40 发布

阅读量594

点赞数

分类专栏： vue 插件文章标签： vue ming-ui 插件 vue-lazyload

本文链接：https://blog.csdn.net/weixin_44514665/article/details/103992723

版权

vue 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

插件

6 篇文章 0 订阅

订阅专栏

场景：

之前有开发过一个 H5+ APP，其中有设计到商品图片的懒加载，因为在项目中涉及到的图片很多。对图片进行一个懒加载可以提高用户体验。（现今APP内部基本上都会涉及到对图片进行一个懒加载，所以，以此文章记录一下。）

描述：

在接口返回数据之前以一个自定义一个加载图片占据商品图片位置。项目是结合mui.js + Mint-ui + vue开发的，目前不是很建议大家再用Mint-ui 开发vue 项目了，虽然mint-ui 曾是开发vue项目的大热 ui 框架，现今比它优秀的组件库有很多。但是文档已经很久没更新，而且组件方法的使用，而且文档写的很简单。。。有时候想扩展一个功能的时候，你会发现，稍微高级点的用法文档上面都没说。。。

Mint-UI 中 lazyload 配置：

话不多说，以下是项目中的一个示例：

// main.js中

import Vue from 'vue'
// 引入mint-ui 模块以及样式文件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

// 懒加载的图片，也就是图片还没加载出来的时候显示的图片
import loadingimg from './../static/img/loadingimg.png'

// 配置
Vue.use(MintUI,{
  lazyload:{
    loadingimg,    
    filter:{    // 过滤
      progressive (listener, options) {
        // 对class为 productImg 的元素图片懒加载
        if(listener.el.parentElement.className == 'productImg'){
          listener.loading = loadingimg2
        }
      }
    }
  }
})

filter 就是过滤器，它会在每次图片加载前对图片地址进行一次过滤，在这里可以自定义过滤规则。可根据class名渲染不同的尺寸的图片。

如果不需要过滤器，可以这样：

Vue.use(VueLazyload, {
  error: './../static/img/error.png',     // 图片加载失败的时候
  loading: './../static/img/loading.gif',    // 加载时的图片
  attempt: 1     // 尝试的次数
})

在main.js中全局配置好之后，在页面中的使用：

<template>
  <img v-lazy="imgUrl" alt="">
</template>

因为Mint-UI 自带有lazyload效果，研究发现，如果你同时引入 mint-ui 和 vue-lazyload 的话，vue-lazyload可能不会起作用。。。但是mint-ui 的 lazyload 的所有配置方法在 vue-lazyload 的文档中都有，因为Mint-UI 的 lazyload 也是用的 vue-lazyload 这个插件来实现的。

在此附上 vue-lazyload 官方文档：https://github.com/hilongjw/vue-lazyload#image-listener-filter