1.安装

npm i vue-lazyload -S

2.配置 main.js

/***图片模板等懒加载 start ***/
import VueLazyload from 'vue-lazyload'
// 404图片
import errImg from './assets/img/404.png'
// loading图片
import loadingImg from './assets/img/loading-spin.svg' // 图片懒加载配置
Vue.use(VueLazyload, {
preLoad: 1.3, // 预加载高度比例
error: errImg, // 图片路径错误时加载图片
loading: loadingImg, // 预加载图片
attempt: 1, // 尝试加载图片数量
// set observer to true
observer: true,
// optional
observerOptions: {
rootMargin: '0px',
threshold: 0.1
}
})
/***图片模板等懒加载 end ***/

3.调用

<!-- 图片懒加载-->
<img v-lazy="picUrl" />

.

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

  1. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  2. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  3. Vue图片懒加载插件

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

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

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

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

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

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

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

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

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

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

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

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

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

  10. 使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载

    官方文档:https://youzan.github.io/vant/#/zh-CN/lazyload 引入 Lazyload 是 Vue 指令,使用前需要对指令进行注册 import Vue fro ...

随机推荐

  1. 一个小笔记(2):Socket网络编程

    网络通信的流程: 服务器端申请套接字 -> 绑定套接字到本地,打开端口 -> 监听端口 -> 等待接受消息 -> 有消息之后,读取消息 客户端申请套接字 -> 向服务端发 ...

  2. jqury 延迟方法

    $("button").click(function(){    $("#div1").delay("slow").fadeIn();    ...

  3. 10. GLOBAL_STATUS 与 SESSION_STATUS

    10. GLOBAL_STATUS 与 SESSION_STATUS 注意 从MySQL 5.7.6开始,show_compatibility_56系统变量的值会影响此处描述的表中的可用信息. 有关详 ...

  4. 移动web touch事件

    参考:http://www.cnblogs.com/dojo-lzz/p/5452575.html wap中的原生touch 事件,touchstart.touchmove.touchend.touc ...

  5. 条款12:复制对象时勿忘其每一个成分(Copy all parts of an object)

    NOTE: 1.Copying 函数应该确保复制“对象内的所有成员变量”及“所有base class成分”. 2.不要尝试以某个copying函数实现另一个copying函数.应该将共同机能放进第三个 ...

  6. 宝塔apache配置

    apache配置 <VirtualHost *:80> ServerAdmin webmaster@example.com DocumentRoot "/www/wwwroot/ ...

  7. OAuth2.0授权流程

    微信授权 第3步的微信授权中的scope字段: snsapi_base 静默授权,不弹出用户同意框,可直接获取成员的基础信息:    snsapi_userinfo:静默授权,弹出用户同意框,待用户同 ...

  8. [bzoj1022][SHOI2008]小约翰的游戏John (反Nim游戏)

    Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取 的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不 ...

  9. Leetcode 304.二维区域和检索-矩阵不可变

    二维区域和检索 - 矩阵不可变 给定一个二维矩阵,计算其子矩形范围内元素的总和,该子矩阵的左上角为 (row1, col1) ,右下角为 (row2, col2). 上图子矩阵左上角 (row1, c ...

  10. HDU 3264 区间内的最大最小之差

    题目链接:http://poj.org/problem?id=3264 题目大意:在给定一堆牛的数量以及其高度的时候,每次给定一段区间,求这个区间内最高的牛和最矮的牛的高度之差为多少. 可以直接利用R ...