个人通过查找发现一个比较好用的模块,vue-lazyload

第一步 下载安装这个包   

  npm install vue-lazyload

第二步 在main.js中引入这个模块

  import VueLazyLoad from "vue-lazyload"

  Vue.use(VueLazyLoad,{

    error:"./static/a1.jpg",

    loading:"./static/loading.gif"
  })

  

第三步  将需要懒加载的图片更换属性  

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

  

刷新页面 大家就会看到懒加载的效果

vue的懒加载如何实现?的更多相关文章

  1. 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  2. Vue图片懒加载插件

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

  3. vue组件懒加载

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

  4. vue 路由懒加载 使用,优化对比

    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运 ...

  5. vue实现懒加载的几种方法

    vue实现惰性加载是基于: 1.ES6的异步机制 components: { comp: (resolve, reject) => {} } 2. webpack的代码分割功能 require. ...

  6. vue 图片懒加载 vue-lazyload

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

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

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

  8. Vue图片懒加载

    图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性 ...

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

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

  10. vue组件懒加载(Load On Demand)

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand ...

随机推荐

  1. 深入WPF中的图像画刷(ImageBrush)之2——ImageBrush的铺设方式

    原文:深入WPF中的图像画刷(ImageBrush)之2--ImageBrush的铺设方式 ------------------------------------------------------ ...

  2. arcserver开发小结(一)

    一.关于属性查询 由于要做属性查询,又重新玩起了arcmap中的select by attribute,有很多自己当初玩弄arcmap多年还不是很清楚的东西 1,字段名 (1)file geodata ...

  3. wpf 屏蔽热键

    原文:wpf 屏蔽热键 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a771948524/article/details/9428923   us ...

  4. explanatory variable(independent vs dependent)、design matrix

    design matrix(设计矩阵) 是统计学上的概念,一般标记为 X,是由一组对象的解释变量(explanatory variables)构成的矩阵. 1. explanatory variabl ...

  5. OpenGL(十五) OpenCV+OpenGL实现水面倒影

    有两幅原始图片,一个是景物图像,一个是水面图像,尝试生成景物在水中的倒影: 在OpenGL中,加载并显示这个景物图像可以把这个图像作为纹理载入即可,把图像直接选择180度的效果就相当于是在镜面中倒影的 ...

  6. WPF 左键单击弹出菜单 ContextMenu

    原文:WPF 左键单击弹出菜单 ContextMenu WPF中的ContextMenu在XAML中可直接做出来,但是仅限于右键弹出菜单,如果需要添加左键弹出功能,只需要在事件中添加Click事件 X ...

  7. Qt SQLite 批量插入优化(SQLite默认将每条语句看成单独的事务)good

    使用SQLite存储数据时发现插入速度太慢,程序跑了将近五分钟才插入了不到三千条.上网查资料才发现,SQLite这种文件数据库与MySql机制不一样,每条事务都有打开和关闭文件的步骤,SQLite默认 ...

  8. HALCON学习之算子大全

    1.1 Gaussian-Mixture-Models 1.add_sample_class_gmm 功能:把一个训练样本添加到一个高斯混合模型的训练数据上. 2.classify_class_gmm ...

  9. n阶贝塞尔曲线绘制(C/C#)

    原文:n阶贝塞尔曲线绘制(C/C#) 贝塞尔是很经典的东西,轮子应该有很多的.求n阶贝塞尔曲线用到了 德卡斯特里奥算法(De Casteljau's Algorithm) 需要拷贝代码请直接使用本文最 ...

  10. 枚举与字符串转及RecordSet转XML,JSON

    function AdoToJs(ado: TADOQuery): string; var I, J: Integer; json: string; begin json := '{columns:[ ...