首页 > 其他分享 >vue2使用图片懒加载之vue-lazyload

vue2使用图片懒加载之vue-lazyload

时间:2023-05-07 12:55:17浏览次数:49  
标签:vue vue2 加载 VueLazyload lazyload 图片 页面

1. 为什么要进行图片懒加载呢?

使用图片懒加载的主要原因是为了优化网站或应用程序的性能和用户体验。当页面中存在大量图片时,如果一次性全部加载会影响页面的加载速度,用户可能需要等待很长时间才能看到完整的页面内容,这会影响用户的体验和满意度。

2. 如何实现图片懒加载

使用https://www.npmjs.com/package/vue-lazyload官网的vue-lazyload来实现图片懒加载

npm install vue-lazyload@^1.2.6 --save vue2安装

3. 在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
})

4. 在页面中使用

<img :src="imageSrc" alt="Lazy Load Image"> 的src改为v-lazy即可实现图片懒加载

<template>
  <div>
    <img v-lazy="imageSrc" alt="Lazy Load Image">
  </div>
</template>

5. 其他的配置项可以去官网查看详细信息
https://www.npmjs.com/package/vue-lazyload

标签:vue,vue2,加载,VueLazyload,lazyload,图片,页面
From: https://www.cnblogs.com/Amyel/p/17379147.html

相关文章

  • 关于vue系统禁止脚本运行问题的解决
    问题描述满怀期待地输入vuelist命令行,然后就出现了这个错误问题解决以管理员身份运行终端界面,在该界面输入get-ExecutionPolicy,查看脚本运行状态是否被允许,若是出现Restricted结果,则表明被禁止;若是出现RemoteSigned结果,则表明没有被禁止;(是可以正常使用的!)若是被禁止,则输入se......
  • Vite-WeGPT聊天AI实例|vue3+pinia仿ChatGPT聊天界面
    基于vue3.x+vite4+pinia2仿chatgpt聊天模拟实例Vue3-WeGPT。基于Vite4.x+Vue3+Pinia2+VEPlus+Vue3-Markdown等技术实现仿ChatGPT聊天AI界面实例。整体界面简洁清新、支持2种界面布局、暗黑+亮色模式、全屏+半屏展示、Markdown语法解析、侧边栏收缩等功能。使用技术编辑器:cur......
  • java基于ssm+vue的旅游管理系统、旅游资源网站、旅游网站管理系统,附源码+数据库+文档+
    1、项目介绍旅游资源网站的主要使用者分为管理员和用户,实现功能包括管理员:首页、个人中心、用户管理、景点信息管理、购票信息管理、酒店信息管理、客房类型管理、客房信息管理、客房预订管理、交流论坛、系统管理,用户:首页、个人中心、购票信息管理、客房预订管理、我的收藏管理,......
  • Vue.js设计与实现 第一章
    一,框架设计概览1.权衡的艺术1.1命令式和声明式命令式框架的一大特点就是关注过程.自然语言描述能够与代码产生一一对应的关系,代码本身描述的是"做事的过程",这符合我们的逻辑直觉。声明式框架更加关注结果.1.2性能与可维护的权衡1.3虚拟DOM的性能如何1.4运行时和......
  • vue3源码-三、ref和toRefs的实现
    实现Refref的本质就是通过类属性访问器来实现,可以将一个普通值类型进行包装import{hasChanged,isObject}from"@vue/shared";import{track,trigger}from"./effect";import{TrackOpTypes,TriggerOpTypes}from"./operations";import{reactive}from&q......
  • Vue插槽的使用
    在Vue中插槽是个很好的东西,它被广泛应用于组件的封装,使组件更加灵活。提升了组件的扩展性。在项目中,可以用<slot></slot>来定义一个插槽。我们可以在引用该组件的时候往这个插槽内放任何我们想放的元素。插槽分为默认插槽,具名插槽,作用域插槽。我们先看默认插槽,默认插槽就是上面......
  • vue-router
    安装vue-router是一个vue的插件,用来实现前端的路由,推荐使用pnpmaddvue-router@4进行安装。推荐配合vue3组合式api使用基础从一个例子开始<!--App.vue文件--><divid="app"><h1>HelloApp!</h1><p><!--使用router-link组件进行导航--><!--通过传......
  • vue配置请求本地接口
    proxy:{'/nrms':{target:'http://localhost:8921/',changeOrigin:true,ws:true,pathRewrite:{'^/nrms':'/'}},'/':{targ......
  • vue编码一个简单的组件
    基于上一篇博客,现在我来学一下,如何根据vue编写一个简单的组件第一步:导入vue.js模板第二步:代码编写,定义一个Vue组件component第三步:还是需要id填写app调用这个scriptzujianmingcheng==组件名称(自定义的)全部代码演示<!DOCTYPEhtml><htmllang="en"xmlns:v-bind="http:......
  • vite vue3 EsLint配置
    1、安装ESLintnpmi-Deslint2、初始化配置EsLintnpxeslint--init2-1、选择模式 2-2、选择语言模块 2-3、选择语言框架 2-4、是否使用ts 2-5、代码在哪里运行2-6、选择一个风格2-7、你想遵循哪一种风格指南2-8、希望配置文件是什么格式2-9、依赖......