vue-lazyload简单使用

谁借莪１个温暖的怀抱￠ 2021-12-03 07:59 289阅读 0赞

vue-lazyload简单使用

npm地址：[https://www.npmjs.com/package/vue-lazyload][https_www.npmjs.com_package_vue-lazyload]

github地址：[https://github.com/hilongjw/vue-lazyload][https_github.com_hilongjw_vue-lazyload]

例子：[http://hilongjw.github.io/vue-lazyload/][http_hilongjw.github.io_vue-lazyload]  
1安装插件

npm install vue-lazyload   --save

或者CDN: [https://unpkg.com/vue-lazyload/vue-lazyload.js][https_unpkg.com_vue-lazyload_vue-lazyload.js]

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
    <script>
      Vue.use(VueLazyload)
      ...
    </script>

2.引用文件，一般在main.js全局引用，且配置好图片

//main.js
    import Vue from 'vue'
    import App from './App.vue'
    import VueLazyload from 'vue-lazyload'
     
    Vue.use(VueLazyload)
     
    // or with options
    Vue.use(VueLazyload, {
      preLoad: 1.3,
      error: 'dist/error.png',
      loading: 'dist/loading.gif',
      attempt: 1
    })
     
    new Vue({
      el: 'body',
      components: {
        App
      }
    })

1.  vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

<ul>
      <li v-for="img in list">
        <img v-lazy="img.src" >
      </li>
    </ul>

博客看自：[https://www.cnblogs.com/zzxuan/p/9690496.html][https_www.cnblogs.com_zzxuan_p_9690496.html]

转载于:https://www.cnblogs.com/smart-girl/p/11168363.html

[https_www.npmjs.com_package_vue-lazyload]: https://www.npmjs.com/package/vue-lazyload
[https_github.com_hilongjw_vue-lazyload]: https://github.com/hilongjw/vue-lazyload
[http_hilongjw.github.io_vue-lazyload]: http://hilongjw.github.io/vue-lazyload/
[https_unpkg.com_vue-lazyload_vue-lazyload.js]: https://unpkg.com/vue-lazyload/vue-lazyload.js
[https_www.cnblogs.com_zzxuan_p_9690496.html]: https://www.cnblogs.com/zzxuan/p/9690496.html

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关 git 简单使用

git上一个分布式源码管理工具，可以离线提交 git分为工作区、暂存区（需要更总文件状态区）和历史区（提交后区域） git 全局配置文件在当前用户家目录的.gitconfi

冷不防/ 2022年08月05日 00:48/ 0 赞/ 246 阅读

相关 nginx简单使用

安装： groupadd -r -g 108 nginx useradd -r -g 108 nginx tar -xf ... cd

灰太狼/ 2022年08月04日 10:56/ 0 赞/ 218 阅读

相关 LomBok简单使用

一、LomBok: > Lombok 是一种通过注解实现省略set&get等方法的工具包。简单介绍一下日常使用注解： 1. @Log4j2 > 等同于 priv

叁歲伎倆/ 2022年04月16日 04:41/ 0 赞/ 306 阅读

相关 Gson简单使用

Gson工具类使用常用类：`JsonArray` `JsonElement` `JsonObject` `JsonParser` `TypeToken` 在线文档：

待我称王封你为后i/ 2022年03月11日 15:49/ 0 赞/ 401 阅读

相关 BigDecimal简单使用

List<String> list=new ArrayList<>(); list.add("11.1"); list.

末蓝、/ 2021年09月26日 17:00/ 0 赞/ 536 阅读

相关 fiddler简单使用

1、 Content-Type：请求响应的类型 1. 提示返回的类型，如json数据、html页面 2. https://www.cnblogs.com/klb561

蔚落/ 2021年09月24日 22:16/ 0 赞/ 440 阅读

相关 IPerf简单使用

一点睛 1 IPerf是一个服务器/客户端运行的程序 2 在服务器端运行iPerf，也需要在客户端运行IPerf。 3 服务器端，在命令行下使用iperf加参数-s。

迷南。/ 2021年09月19日 11:46/ 0 赞/ 491 阅读

相关获取vue-lazyload、VueLazyLoad加载完毕后的图片高度

有时候需要知道vue-lazyload加载完毕后，做一些操作，比如获取图片的总高度等等，使用 this.$Lazyload.$on('loaded', handler) 方

今天药忘吃喽~/ 2021年08月27日 00:53/ 0 赞/ 554 阅读

相关 MyBatisPlus--简单使用

创建Maven工程，引入依赖 <dependencies>  <de

朴灿烈づ我的快乐病毒、/ 2021年08月26日 18:33/ 0 赞/ 633 阅读

相关 Shiro--简单使用

创建Maven项目，添加依赖 <dependencies> <dependency> <grou

布满荆棘的人生/ 2021年08月24日 20:07/ 0 赞/ 502 阅读