一、Vue懒加载

文档:https://github.com/hilongjw/vue-lazyload

1.安装

cnpm i vue-lazyload -S

npm i vue-lazyload -S

2.实例

导入配置等操作 src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
//【1】导入懒加载
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)//【1】懒加载使用(和下面一句2选1) //【1】懒加载使用,且入全局配置,在使用处就不用配置错误图片等(2选1)
// Vue.use(VueLazyload, {
// preLoad: 1.3, //加载时间
// error: 'dist/error.png', //图片错误显示此图
// loading: 'dist/loading.gif', //加载过程显示此图
// attempt: 1 //默认加载张数
// }) Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})

使用懒加载src/components/lazy.vue

【1】定义图片错误显示等(引入图片,如果是在js中。必须require进来)

【2】使用懒加载写法 v-lazy='xxx'

<template>
<div>
<!--【2】使用懒加载写法 v-lazy='xxx'-->
<img v-lazy="imgUrl"/>
<img v-lazy="imgObj" />
</div>
</template>
<script> export default{
name:"lazy",
data(){
return{
// 【1】定义图片错误显示等(引入图片,如果是在js中。必须require进来)
imgObj: {
preLoad: 1.3, //加载时间
src: "http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg",//真正图片
error: require("../assets/error.jpg"),//如果错误显示此图
loading: require("../assets/loadding.jpg"), //加载过程显示此图
attempt: 1, //默认加载张数
},
imgUrl:"http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" //只加一条,即真正图
}
}
}
</script> <style></style>

效果:图片地址错误时加载到的图片。加载过程就显示加载过程图片。

八、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. Vue图片懒加载插件 - vue lazyload的简单使用

    Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  6. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  7. vue学习(八) vue中样式 class 定义引用

    //style<style> .red{ color:red; } .thin{//字体粗细 font-weight:200 } .italic{//字体倾斜 font-style:ita ...

  8. 八 Vue学习 fetch请求

    1:import {login, getAdminInfo} from '@/api/getData'(从api/getData.js中import login函数.) 看一下如下的getData.j ...

  9. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  10. Vue自带的过滤器

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 过滤器写法 {{ message | Filter}} 二 ...

随机推荐

  1. Struts2学习(七)

    Servlet实现下载 1.Servlet 3.1之前实现文件上传 package ecut.request; import java.io.BufferedReader; import java.i ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设定文本右对齐

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  3. c++继承:公有、私有、保护(对应p12访问限制)

    公有继承(public).私有继承(private).保护继承(protected)是常用的三种继承方式. 1. 公有继承(public) 公有继承的特点是基类的公有成员和保护成员作为派生类的成员时, ...

  4. 「CF1037D」Valid BFS?

    传送门 Luogu 解题思路 考虑直接模拟 \(\text{BFS}\) 的过程. 对于每一个节点的儿子,先遍历在输入序列中靠前的,判断 \(\text{BFS}\) 是否匹配即可. 细节注意事项 注 ...

  5. Xcode下载途径

    Xcode除了能在Appstore直接下载外,还可以用开发者账号登陆开发者中心[https://developer.apple.com/download/]下载对应的资源. 在开发者中心下载的好处是, ...

  6. mysql视图初探

    mysql视图初探 官方例子如下,从官方的例子就可以看出来视图就是提供一种快捷查询.用视图来查询一些常用的结果. mysql> help create view; Name: 'CREATE V ...

  7. Prometheus组件

    Prometheus组件 上一小节,通过部署Node Exporter我们成功的获取到了当前主机的资源使用情况.接下来我们将从Prometheus的架构角度详细介绍Prometheus生态中的各个组件 ...

  8. [c#]如何访问 JArray 的元素

    JArray 格式文件. public void TestJson() { var jsonString = @"{""trends"": [ { & ...

  9. eclipse js文件无法保存错误

    错误信息如下 Save Failedjdk.nashorn.internal.runtime.ECMAException.getEcmaError()Ljava/lang/Object; 网上多番查找 ...

  10. PhpStorm 10.0.1破解激活步骤

    1.下载破解补丁 链接:https://pan.baidu.com/s/1S4JVKiaFnCZG01MpDPaAAA 密码:c6x6 放到phpstorm安装目录下的lib文件夹下: C:\soft ...