Vue的图片懒加载 vue-lazyload插件使用

news/2024/10/22 12:32:02/
  • 图片懒加载是一种网页性能优化技术,页面加载时仅加载可见区域内的图像,图像只会在用户滚动或浏览到它们时才会被加载,而不是在页面一开始就全部加载。

  • 优点

    • 可以减少首页首次加载的数量,减少服务器的压力
    • 有占位图片来展示预加载动态效果,用户体验更好一点
  • 安装

npm install vue-lazyload
  • 使用
javascript">// 全局使用的话  可以在main.js 文件注册
import VueLazyload from 'vue-lazyload'
// 配置
Vue.use(VueLazyload, {preLoad: 1.3, //宽高比loading: "//static/imgs/imgLoading.svg", //预加载图片// error 加载失败图片attempt: 1, // 加载错误后最大尝试次数
})
// <img v-lazy="要展示的图片"/>

http://www.ppmy.cn/news/1425770.html

相关文章

rman 归档备份 archived log 不重复备份

11.2.0.3数据库环境&#xff0c;使用rman进行归档日志备份&#xff0c;想实现&#xff1a; (1)每天备份归档日志&#xff0c;备份完并不删除归档日志 (2)归档日志备份成功一次之后&#xff0c;下次再备份的时候rman就自动不会再次备份这个归档日志 这个需求可以通过 backup …

K8s: 在Pod中将configmap数据注入容器

configMap 概述 文档: https://kubernetes.io/zh-cn/docs/concepts/configuration/configmap/ Kubernetes 为我们提供了 ConfigMap&#xff0c;可以方便的配置一些变量 是一个存储键值对 key-value 对象的 创建一个可以包含多个键值对的 ConfigMap, 以下是&#xff1a;mul-c…

DNS服务器配置与管理(2)——BIND部署DNS

在Linux上配置DNS的常用软件是BIND&#xff08;Berkeley Internet Name Domain Service&#xff0c;BIND&#xff09;&#xff0c;它是一款实现DNS服务器的开放源码软件。本文详细介绍了在CentOS7上安装并配置Bind软件。 一、Bind软件介绍 BIND包最初是在 1980 年代初在加州大…

OpenCV基本图像处理操作(四)——傅立叶变换

傅里叶变换的作用 高频&#xff1a;变化剧烈的灰度分量&#xff0c;例如边界 低频&#xff1a;变化缓慢的灰度分量&#xff0c;例如一片大海 滤波 低通滤波器&#xff1a;只保留低频&#xff0c;会使得图像模糊 高通滤波器&#xff1a;只保留高频&#xff0c;会使得图像细节…

go语言并发实战——日志收集系统(二) Kafka简介

消息队列的通信模式 点对点模式 消息生产者生产消息发送到消息队列(queue),消费者从queue中取出并且消费信息&#xff0c;而这条信息被消费后queue中就没有了这条信息&#xff0c;不存在重复消费 发布/订阅 基本概念 发布者发布消息发送到消息队列(topic),订阅者从topic中取…

蓝桥杯2024年第十五届省赛

E:宝石组合 根据给的公式化简后变为gcd(a,b,c)根据算数基本定理&#xff0c;推一下就可以了 然后我们对1到mx的树求约数&#xff0c;并记录约数的次数&#xff0c;我们选择一个最大的且次数大于等3的就是gcd int mx; vector<int> g[N]; vector<int> cnt[N]; int…

python 贪心算法 动态规划实现 跳跃游戏ll【力扣题45】

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 python数据分析…

<个人笔记>基础算法模板题

1.基础算法 &#xff08;1&#xff09;一维前缀和 #include<iostream>using namespace std;const int N 1e510;int p[N],res[N]; int n,Q,l,r;int main() {cin >> n >> Q;for(int i 1;i<n;i){cin >> p[i];res[i] res[i - 1] p[i];}while(Q--)…