个人网站 https://iiter.cn 程序员导航站 开业啦，欢迎各位观众姥爷赏脸参观，如有意见或建议希望能够不吝赐教！

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

实现方法(使用vue的vue-lazyload插件)

1.安装插件

npm install vue-lazyload --save-dev

2.在入口文件main.js中引入并使用

import VueLazyload from 'vue-lazyload'

直接使用

Vue.use(VueLazyload)

或者添加自定义选项

Vue.use(VueLazyload, {

  preLoad: 1.3,

  error: 'dist/error.png',

  loading: 'dist/loading.gif',

  attempt: 1

})

3.修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）

<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage"></a>

参数选项说明

至此，一个简单的图片懒加载就完成啦......

这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头

扫二维码加为好友就完事了！安排~

Vue项目中实现图片懒加载的更多相关文章

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

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

  2. vue项目中主要文件的加载顺序（index.html、App.vue、main.js）

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  3. js实现一个长页面中的图片懒加载即滚动到其位置才加载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. vue项目优化之路由懒加载

    const login = () =>import('@/views/login'); export default new Router({ routes:[ { path:'/login', ...

  5. vue项目中主要文件的加载顺序（index.html、main.js、App.vue）

    todo: https://www.cnblogs.com/xifengxiaoma/p/9493544.html https://www.cnblogs.com/stella1024/p/10563 ...

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

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

  7. Vue图片懒加载插件

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

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

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

  9. vue 图片懒加载 vue-lazyload

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

随机推荐

  1. 使用mpvue开发小程序如何定义全局变量

    我们创建好mpvue项目之后,找到src/main.js打开在后面添加一行代码 (注意:不能在const app = new Vue(App) 之前添加) Vue.prototype.globalDa ...

  2. 从String 聊源码解读

    @ 目录 源码实现 构造方法 equals 其他方法 常见面试题 你真的了解String吗?之前一篇博客写jvm时,就觉得String可以单独拎出来写一篇博客,毕竟几乎所有的面试都是以String开始 ...

  3. docker-compose错误

    1.错误信息: ERROR: for gamehall Get https://hub.tondeen.com/v1/_ping: http: server gave HTTP response to ...

  4. Python库-NumPy

    NumPy是一个开源的Python科学计算库,用于快速处理任意维度的数组. 创建NumPy数组 #创建一维数组 list1 = [1,2,3,4] array1= np.array(list1)#用p ...

  5. Vue-router 第5节 vue-router利用url传递参数

    Vue-router 第5节 vue-router利用url传递参数 目录 Vue-router 第5节 vue-router利用url传递参数 第5节 vue-router利用url传递参数 冒号的 ...

  6. Python操作rabbitmq系列（三）:多个接收端消费消息

    接着上一章.这一章,我们要将同一个消息发给多个客户端.这就是发布订阅模式.直接看代码: 发送端: import pikaimport sys connection = pika.BlockingCon ...

  7. lr组织架构模式

    基本模式:默认目录由三部分组成 Vuser_int Action,…… Vuser_end 执行时会按照这三个顺序执行(Action部分是可以循环的,也可多个action) 1.lr12录制前可以设置 ...

  8. cmd批处理转义字符%的详细解释

    cmd批处理转义字符%的详细解释 在命令行中使用for时不需要双%,这源于命令解释器对命令行与批处理的处理方式不同. 1.%是个ESCAPE字符,通常将之译为转义字符,但也有更形象的译名脱逸字符.逃逸 ...

  9. Floyd-例题-实现-我的第一篇博客

    https://www.cnblogs.com/lbssxz/p/11014911.html 这是网上看到的题目,以上是原博主的解答和题目来源(没找到别的题目来源) 题目大意: 城市交通费 [问题描述 ...

  10. c++学习day01基础知识学习

    一.代码示例解析: #include <iostream> int main() { using namespace std; cout << "come up an ...