vue-lazyload简单使用

npm地址:https://www.npmjs.com/package/vue-lazyload

github地址:https://github.com/hilongjw/vue-lazyload

例子:http://hilongjw.github.io/vue-lazyload/

1.安装插件

npm install vue-lazyload   --save

或者CDN: 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
}
})

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

 template:

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

vue-lazyload简单使用的更多相关文章

  1. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  2. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  3. 【vue lazyload】插件的使用步骤

    VUE图片懒加载-vue lazyload插件的简单使用

  4. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  5. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  6. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  7. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  8. 沉淀,再出发:VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  9. vue实现简单在线聊天

    vue实现简单在线聊天 引用mui的ui库,ES6的 fetch做网络请求 //html <!DOCTYPE html> <html> <head> <met ...

  10. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. LeetCode算法题-Same Tree(Java实现)

    这是悦乐书的第162次更新,第164篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第21题(顺位题号是100).给定两个二叉树,编写一个函数来检查它们是否相同.如果两个二 ...

  2. Java反射机制小结和实际操作

    一.什么是反射 1.编译和运行 在了解什么是Java反射机制前,先聊聊Java的编译和运行. 还记得第一次使用记事本编写第一个Java程序的场景吗?通过命令窗口,使用javac命令编译一个.java文 ...

  3. JavaScript字符集

    引言 JavaScript程序使用Unicode字符集编写.Unicode是ASCII和Latin-1的超集,并支持地球上几乎所有在使用的语言.ECMAScript3要求JavaScript的实现必须 ...

  4. 使用Three.js挖空安装门来解决重叠闪烁的问题

    一.挖空原理说明 subtract 用墙面减去与门重叠的部分,产生一个新的对象,导入材质安装门即可 //参与减去几何体 //平行于x轴门 var meshH4Door = new ThreeBSP( ...

  5. C#事件の事件聚合器(二)

    WPF中时常会遇到ViewModel之间的通讯,ViewModel并不知道自己的View,但是一个View发生的更改需要通知另外一个View. 举一个例子,软件界面上有个人信息,打开一个界面更改用户的 ...

  6. linux学习笔记整理(一)

    第二章  Linux基本操作 2.1 Linux网络相关概念和修改IP地址的方法2.2 关闭防火墙并设置开机开不启动2.3 临时和永久关闭Selinux2.4 设置系统光盘开机自动挂载2.5 配置本地 ...

  7. JAVA序列化和反序列化XML

    package com.lss.utils; import java.beans.XMLDecoder; import java.beans.XMLEncoder; import java.io.Bu ...

  8. CUDA Fortran for Scientists and Engineers第二版翻译

          下午听朋友说,NV把<CUDA Fortran for Scientists and Engineers>的出版权卖给了国内某出版商.第一反应是我们三翻译的岂不是白翻译了.第二 ...

  9. [1] YOLO 图像检测 及训练

    YOLO(You only look once)是流行的目标检测模型之一, 原版 Darknet 使用纯 C 编写,不需要安装额外的依赖包,直接编译即可. CPU环境搭建 (ubuntu 18.04) ...

  10. [matlab] 2.数据可视化

    t=(0:0.01:2)*pi; x=sin(t); y=cos(t); z=cos(2*t); plot3(x,y,z,'r-','linewidth',1.5); box on; %打开坐标系边框 ...