vue-lazyload简单使用

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

1.安装插件

npm install vue-lazyload   --save

2.引用文件,一般在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, //提前加载高度(数字 1 表示 1 屏的高度)
error: 'dist/error.png', //图片加载失败时显示的图片
loading: 'dist/loading.gif', //图片加载状态下显示的图片
attempt: 1 //加载错误后最大尝试次数
}) new Vue({
el: 'body',
components: {
App
}
})

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

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

4、vue文件中需要懒加载的背景图片,v-lazy:background-image="imgUrl"

<div v-lazy:background-image="imgLink"></div>

vue-lazyload 图片懒加载的更多相关文章

  1. Vue 自定义图片懒加载指令v-lazyload

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  2. 对于富文本编辑器中使用lazyload图片懒加载

    使用lazyload.js图片懒加载的作用是给用户一个好的浏览体验,同时对服务器减轻了压力,当用户浏览到该图片的时候再对图片进行加载,项目中使用lazyload的时候需要将图片加入data-orgin ...

  3. 【vue】---- 图片懒加载

    1.作用 在图片较多的页面中,页面加载性能较差.使用图片懒加载可以让图片出现在可视区域时再进行加载,从而提高用户体验. 2.原理 设置img标签的src属性为空或统一的图片路径(如加载中样式),监听页 ...

  4. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  5. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  6. [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

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

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

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

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

  9. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  10. Vue实现一个图片懒加载插件(转载)

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

随机推荐

  1. torch_12_BigGAN全文解读

    1.摘要: 尽管近来生成图片模型取得了进步,成功生成了高分辨率的图片,但是在复杂的数据集中,样本的多样性仍然是难以捉摸的目标.本文尝试在大规模上训练生成对抗网络,并研究这种规模下的不稳定性.我们发现将 ...

  2. 【UOJ#75】【UR #6】智商锁(矩阵树定理,随机)

    [UOJ#75][UR #6]智商锁(矩阵树定理,随机) 题面 UOJ 题解 这种题我哪里做得来啊[惊恐],,, 题解做法:随机\(1000\)个点数为\(12\)的无向图,矩阵树定理算出它的生成树个 ...

  3. Netty中FastThreadLocal源码分析

    Netty中使用FastThreadLocal替代JDK中的ThreadLocal[JAVA]ThreadLocal源码分析,其用法和ThreadLocal 一样,只不过从名字FastThreadLo ...

  4. 使用NumPy、Numba的简单使用(二)

    本来要写NLP第三课动态规划的,日了,写到一半发现自己也不会了,理论很简单,动态规划咋回事也知道,但是实现在源码上还是有点难度,现在简单给予题目描述,小伙伴也可以来思考一下,例题一,我们现在有1元硬币 ...

  5. internet信息服务(IIS)管理器 在哪里?

    我们在搭建网络配置时就需要找到internet信息服务(IIS)管理器,下面我们就来看看internet信息服务(IIS)管理器在哪里能够找到. 工具/材料 使用工具:电脑 01 02 03 04 0 ...

  6. WPF-控件模板

    说起控件模板,还是因为在一次需求实现中,我碰到了一个圆形按钮.一开始我认知的按钮是方形灰不拉几的一个块儿.这如何实现一个圆形按钮? 我最先想到的是使用样式,可是发现根本就没有改变Button形状的属性 ...

  7. Java性能 -- 线程上下文切换

    线程数量 在并发程序中,并不是启动更多的线程就能让程序最大限度地并发执行 线程数量设置太小,会导致程序不能充分地利用系统资源 线程数量设置太大,可能带来资源的过度竞争,导致上下文切换,带来的额外的系统 ...

  8. JavaScript prototype原型用法

    JavaScript对象原型 所有JavaScript对象都从原型继承属性和方法. <!DOCTYPE html> <html> <meta charset=" ...

  9. android studio学习----android studio断点调试

    先编译好要调试的程序. 1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可. 2.开启调试会话 点击红色箭头指向的小虫子,开始进入调试. IDE下方出现Debug视图,红色的箭头指 ...

  10. xml路径错误无法打包

    http://blog.csdn.net/iangelfalls/article/details/7102844