当前位置：首页 > news >正文

同时支持Vue2/Vue3的图片懒加载组件（支持懒加载 v-html 指令梆定的 html 内容）

news 来源：原创 2025/9/21 10:43:04

🚀 vue-lazyload-imgs（LazyLoadImgs）组件简介

详情见：https://npmjs.com/package/vue-lazyload-imgs

安装方法： npm i vue-lazyload-imgs（不要安装为开发依赖，应为产品依赖）
适用环境：本组件适用于运行在前端开发框架 Vue，同时兼容 Vue2（>=2.6.0）及 Vue3 版本；要求 Vue 版本必须在 2.6.0（包含）以上及 Vue 3.x.x 版本，即 “vue”: “>=2.6.0 || ^3.0.0”；
功能简介：vue-lazyload-imgs 本组件用于实现在 >=2.6.0 及 3.x.x 的 Vue 版本中实现图片的懒加载功能。将包裹在本组件内的所有 html 深层次结构内的图片标签 <img> 实现懒加载功能，亮点是比常见的图片懒加载指令还强大：还可以懒加载使用 Vue 内置的 v-html 指令值梆定的 html 字符串里的 <img> 图片。 初始进入页面及随着页面滚动，只有进入页面窗口可视范围内的图片才会加载显示，从而提升页面的加载速度和用户体验；
组件特性：本组件（图片懒加载组件）具有如下特性：
1. 本组件可一性实现懒加载任意数量的图片，而不是像某些图片懒加载指令那样，每个<img>图片标签都要添加 v- 开头的自定义图片懒加载指令；本组件只需要将要加载的任意数量的<img>图片标签包裹起来（即把要加载的所有图片及其父标签作为本组件 LazyLoadImgs 的默认插槽内容），<img>图片标签可以嵌套任意层次，并且<img>图片标签可以在任何其它合法的 html 标签内，具体可查看【使用方法】部分）。
2. 本组件还支持实现懒加载由 v-html 指令梆定的 html 字符串内容里面的<img>图片，这些场景特别适用于一些带有图片的文章或留言内容，在 Vue3 中，使用本组件渲染 v-html 指令梆定的 html 内容时，必须与本组件标签内的 v-model 指令搭配使用，否则本组件包裹内（即默认插槽内）的使用了 v-html 指令梆定的 html 内容里的 <img> 图片不能实现懒加载，这是由于 Vue3 对使用 v-html 指令渲染 html 内容的虚拟节点渲染原理所需；
  
  在 Vue2 环境下，使用本组件渲染 v-html 指令梆定的 html内容时，可以不在本组件标签内设置 v-model 指令和 htmlFieldName 参数也可以，不过为了使用本组件时，与 Vue3 代码保持一致，及方便迁移到 Vue3 环境，建议 Vue2 环境下也加入 v-model 指令和 htmlFieldName 参数；
  
  详细请查看【Props 参数说明】部分，示例代码如下：

// 如下 v-for 循环的 key 参数请保证使用唯一值（也可安装使用 nanoid 包生成唯一值），不建议采用数组索引 index
// keyFieldName 参数：要渲染的每个对象中的包含 html 内容的字段/属性名，
// 如果 v-model 指令值不是像本例的包含要渲染的 html 内容的对象数组，而是一项简单的 html 字符串，则不需要设置 keyFieldName 参数
<template><LazyLoadImgs v-model="articleList"><div v-for="{artId, content} in articleList":key="artId"v-html="content"keyFieldName="content"></div></LazyLoadImgs><!-- 【注】：如果本组件标签内的 v-model 指令值不是如上的对象数组，而是 html 字符串（即只需要渲染一项 html 内容），则直接把在块标签如 div 标签内的 v-html 指令值设置为和在本组件标签内的 v-model 指令值一样的响应式 html 字符串变量即可，也不用再设置 htmlFieldName 参数，如下：--><LazyLoadImgs v-model="oneArticle"><div v-html="oneArticle"></div></LazyLoadImgs>
</template><script setup>import { ref } from 'vue';// 由本组件的 v-model 指令梆定的包含要渲染 html 内容字段的对象数组列表，// 要求数组中的每个对象至少要包含表示唯一ID和要渲染的 html 字符串的两个属性const articleList = ref([{artId: 1,  // 唯一ID（必须）author: 'Samdy_Chan'title: '文章1标题',content: '<p>这是文章1内容 <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" /></p>',  // 要渲染的 html 字符串（必须）createTime: '2025-01-01 12:30:01'},{artId: 2,author: 'Andy_Lau'title: '文章2标题',content: '<p>这是文章2内容 <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" /></p>',createTime: '2025-01-03 21:45:32'}]);// 渲染模板中，第二个<LazyLoadImgs>组件的 v-model 指令梆定的只渲染一项 html 内容const oneArticle = `<div><p>这是只渲染一篇文章内容</p><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" /></div>`;
</script>// 【注】：本组件只支持懒加载标准 html 标签内的<img>图片，不支持将其它组件（假定如下的 <MyImgList> 组件封装了很多<img>图片标签，则将 <MyImgList> 组件放在本组件 <LazyLoadImgs> 默认插槽内，是不能实现懒加载 <MyImgList> 组件内的图片的，这是 Vue 的虚拟节点渲染结构导致。
// 【如下是不能实现懒加载效果的】：
<template><LazyLoadImgs><!-- 不能实现懒加载 MyImgList 组件内的图片， 本组件 LazyLoadImgs 只能包裹标准的 html 标签。请在 MyImgList 组件中，使用本 LazyLoadImgs 组件包裹要懒加载的<img>图片标签即可。--><MyImgList /></LazyLoadImgs>
</template>

🚀 安装方法

## npm
npm install vue-lazyload-imgs## yarn
yarn add vue-lazyload-imgs## pnpm
pnpm add vue-lazyload-imgs

🚀 使用方法

在 html 标签如 div 里使用 v-html 指令渲染 html 内容及实现懒加载 html 内容里的 <img> 图片，请查看以上【本组件简介->组件特性】第二部分。 v-html 指令需要与本组件内的 v-model 指令以及 Props 参数 htmlFieldName 一起使用。

方法一：全局使用

(a)、全局注册 For Vue2（Vue >=2.6.x，并且 <=2.7.x）：

// main.ts or main.jsimport Vue from 'vue';import App from './App.vue';// 为 Vue2.6.x 导入 @vue/composition-api 插件（Vue2.7.x 自动集成，无须执行此行）
import VueCompositionApi from '@vue/composition-api';  // Only for Vue2.6.x// 使用默认导入方式导入本组件
import LazyLoadImgs from 'vue-lazyload-imgs';// 为 Vue2.6.x 注册 @vue/composition-api 插件（Vue2.7.x 自动集成，无须执行此行）
Vue.use(VueCompositionApi);  // Only for Vue2.6.x// 【可选】：可配置在以下使用 Vue.use 全局注册本组件时，传入该 lazyOptions 对象配置参数，
// 作为像局部使用本组件时，传递的 Props 参数。
// 这样，在各页面及组件文件中使用本组件时，可不用再传递 Props 参数，这里配置的 lazyOptions 参数是用户为本组件定义的默认参数。
/* 
const lazyOptions = {loadingImg: 'https://img.soogif.comB84eqI5yyJKNYiKJyvqL9SXtgKTmqi1k.gif_jpg',errorImg: 'https://www.91ajs.com/content-data/upload/202303/202303071603195893.png',delay: 3000,lifeFunc: {loading: (img: HTMLImageElement) => {console.log('图片加载中', img);},loaded: (img: HTMLImageElement) => {console.log('加载图片成功，图片地址是：', img.src, img);},error: (img: HTMLImageElement) => {console.log('加载图片失败，图片地址是：', img.src, img);},},
};
*/// 全局注册本组件：缺省不传该 lazyOptions 参数，本组件也提供了内置的 Props 参数，
// 详见【Props & Events/参数和事件说明】部分。
Vue.use(LazyLoadImgs /*, lazyOptions */);new Vue({render: h => h(App)
}).$mount('#app');

(b)、全局注册 For Vue3（Vue >=3.x.x）：

// main.ts or main.jsimport { createApp } from 'vue';import App from './App.vue';// 使用默认导入方式导入本组件
import LazyLoadImgs from 'vue-lazyload-imgs';const app = createApp(App);// 【可选】：可配置在以下使用 app.use 全局注册本组件时，传入该 lazyOptions 对象配置参数，
// 作为像局部使用本组件时，传递的 Props 参数。
// 这样，在各页面及组件文件中使用本组件时，可不用再传递 Props 参数，这里配置的 lazyOptions 参数是用户为本组件定义的默认参数。
/* 
const lazyOptions = {loadingImg: 'https://img.soogif.comB84eqI5yyJKNYiKJyvqL9SXtgKTmqi1k.gif_jpg',errorImg: 'https://www.91ajs.com/content-data/upload/202303/202303071603195893.png',delay: 3000,lifeFunc: {loading: (img: HTMLImageElement) => {console.log('图片加载中', img);},loaded: (img: HTMLImageElement) => {console.log('加载图片成功，图片地址是：', img.src, img);},error: (img: HTMLImageElement) => {console.log('加载图片失败，图片地址是：', img.src, img);},},
};
*/// 全局注册本组件：缺省不传该 lazyOptions 参数，本组件也提供了内置的 Props 参数，
// 详见【Props 参数说明】部分。
app.use(LazyLoadImgs /*, lazyOptions */);app.mount('#app');

<!-- App.vue -->
<!-- 以上全局注册本组件后，在其它任何页面及组件中（如App.vue） 中无须导入，即可以直接使用本组件 -->
<template><!-- 1、采用默认 Props 参数使用本组件（默认参数值详见以下的【Props 参数说明】部分） --><LazyLoadImgs><div class="container"><img src="https://tb2.bdstatic.com/tb/static-common/img/search_logo_big_v2_d84d082.png" /><section class="aside"><div class="aside-left"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" /></div></section></div></LazyLoadImgs><!-- 2、指定自定义 Props 参数使用本组件（可传递的参数和事件回调及说明详见以下的【Props 参数说明】部分），Props 使用驼峰或中横线分隔均可，如 :lazy-options 同 :lazyOptions --><LazyLoadImgs :lazy-options="lazyOptions" :observer-options="observerOptions"><img src="https://tb2.bdstatic.com/tb/static-common/img/search_logo_big_v2_d84d082.png" /></LazyLoadImgs>
</template><script setup>import { ref } from 'vue';// 配置本懒加载组件 LazyLoadImgs 的 Props 参数const lazyOptions = ref({loadingImg: 'https://img.soogif.comB84eqI5yyJKNYiKJyvqL9SXtgKTmqi1k.gif_jpg',errorImg: 'https://www.91ajs.com/content-data/upload/202303/202303071603195893.png',delay: 3000,lifeFunc: {loading: (img: HTMLImageElement) => {console.log('图片加载中', img);},loaded: (img: HTMLImageElement) => {console.log('加载图片成功，图片地址是：', img.src, img);},error: (img: HTMLImageElement) => {console.log('加载图片失败，图片地址是：', img.src, img);},},});// 图片进入可视区监听器参数配置：建议缺省（不用指定）该参数，采用默认值即可const observerOptions = {// 图片进入可视交叉状态的根容器，默认为浏览器视口(null)，建议取默认值 null 即可root: null,// 根容器 margin 值，建议取默认值 0px 即可rootMargin: '0px',// 图片进入与根容器交叠重叠范围的百分比(0-1之间)，即进入可视范围多少百分比后，进行加载，建议取默认值为 0 即可（刚进入可视边界即加载）threshold: 0};
</script>

方法二：局部（组件内）使用

// 如在 App.vue 或其它组件中使用本组件// 需使用分别导入方式导入本组件（因为全局注册使用了默认导入方式）
import { LazyLoadImgs } from 'vue-lazyload-imgs';// 本组件在 <template></template> 模板标签中使用的方式和传递参数和如上的【全局使用】方法相同。

🚀 Props 参数说明

以下所有参数均具有默认值，均为可选参数，绝大多数情况下，本组件不用指定以下任何参数，即可实现图片懒加载功能。

lazyOptions 对象参数（懒加载参数配置对象）
参数名	lazyOptions
类型	object
是否可选	是
说明	懒加载配置对象，包括默认预加载图片、加载失败显示的图片、加载中/加载成功/加载失败后的处理回调函数等
默认值	{loadingImg: DEFAULT_LOADING_IMG,errorImg: DEFAULT_ERROR_IMG,// lifeFunc 默认实际为 undefined，以下只是为了说明其每个属性都是一个函数lifeFunc: {loading: (img: HTMLImageElement) => {},loaded: (img: HTMLImageElement) => {},error: (img: HTMLImageElement) => {}}, delay: 500}

参数名	lazyOptions.loadingImg
类型	string
是否可选	是
说明	图片加载中状态显示的图片url或base64编码
默认值	组件内置的默认加载中状态图片（base64编码）

参数名	lazyOptions.errorImg
类型	string
是否可选	是
说明	图片加载失败状态显示的图片url或base64编码
默认值	组件内置的默认加载失败状态图片（base64编码）

参数名	lazyOptions.lifeFunc
类型	object
是否可选	是
说明	图片各加载状态回调函数（默认不执行图片加载状态回调函数，需要的话，指定即可）
默认值	undefined

参数名	lazyOptions.lifeFunc.loading
类型	Function (imgEl: HTMLImageElement, ...args: any[]) => any
是否可选	是
说明	图片加载中（开始加载）的回调函数
默认值	undefined

参数名	lazyOptions.lifeFunc.loaded
类型	Function (imgEl: HTMLImageElement, ...args: any[]) => any
是否可选	是
说明	图片加载成功（加载完成）后的回调函数
默认值	undefined

参数名	lazyOptions.lifeFunc.error
类型	Function (imgEl: HTMLImageElement, ...args: any[]) => any
是否可选	是
说明	图片加载失败后的回调函数
默认值	undefined

参数名	lazyOptions.delay
类型	number
是否可选	是
说明	图片进入可视范围后，延迟多久加载图片（单位ms）
默认值	500

v-model指令 / v-html指令 / htmlFieldName参数配置（使用 v-html 指令渲染比如带有 <img> 的 html 内容需配置这三个参数）这三个参数的使用示例代码见如上的【本组件简介->组件特性】第二部分
指令名	v-model
本组件要求的值类型	string \| object[] // 如果 v-model 指令值梆定的响应式变量值是字符串，则必须是包含 html 标签内容的字符串，则 v-html 指令值也必须设置为与 v-model 指令梆定的相同的响应式状态变量； // 如果 v-model 指令值梆定的响应式变量值是对象数组类型 object[]，则数组中的每个对象必须要符合发下要求： // 以下 id 和 content 是表示唯一ID和要渲染的 html 字符串的两个属性名，这两个属性名可设置为其它名称 // 要求数组中的每个对象至少要包含表示唯一ID和要渲染的 html 字符串的两个属性 { id: number \| string; // 唯一ID属性名，可以指定其它名称（必须要包含的属性） content: string; // 要渲染的 html 字符串属性名，可以指定其它名称（必须要包含的属性） [Other: string]: any; // 还可以包含其它更多属性 }[]
是否可选	是\|否
说明	如果需要使用 v-html 指令渲染梆定的 html 内容（如渲染 html 格式的文章内容等），则必须需要使用该参数。值可以是 html 标签字符串（一般是包含有要实现懒加载图片的 <img> 标签及其它 html 标签内容；值也可以是对象数组，其中数组中的每个对象，必须要有一个代表唯一ID的字段/属性（如 id)，及保存有 html 字符串的字段/属性（如 content）；需要搭配 v-html 指令和 htmlFieldName 参数使用
默认值	无

指令名	v-html
本组件要求的值类型	string
是否可选	是\|否
说明	此 v-html 指令不是设置在本组件标签内的，是设置在本组件包裹的 html 标签如 div 标签中，指令值为 html 字符串，用于渲染 html 内容；如需渲染 html 格式的文章内容等场景，则需指定该 v-html 指令，需要搭配 v-model 指令和 htmlFiledName 参数使用
默认值	无

参数名	htmlFieldName
类型	string
是否可选	是\|否
说明	如果在本组件设置了 v-model 指令和通过在本组件包裹的 div 等块标签中设置 v-html 指令渲染 html 内容，并且 v-model 的梆定值不是 html 字符串类型的值，而是对象数组类型 object[] 的值，则需要设置该参数，并且需要设置该参数值为 v-model 指令梆定的对象数组中每个对象中存有要渲染的 html 字符串的属性/字段名，本组件需要根据该 htmlFieldName 参数值查找每个对象中 html 字符串字段/属性中的 <img> 图片标签，加入一些的自定义属性标识，进行实现懒加载图片的功能；本 htmlFieldName 参数，一般搭配 v-model 指令和 v-html 指令一起使用
默认值	undefined

observerOptions 对象参数（可视范围边界值参数配置对象）
参数名	observerOptions
类型	IntersectionObserverInit（ts内置类型）
是否可选	是
说明	图片进入可视区监听器参数配置，建议采用默认值即可
默认值	{root: null,rootMargin: '0px',threshold: 0}

参数名	observerOptions.root
类型	Element \| Document \| null
是否可选	是
说明	图片进入可视交叉状态的根容器，默认为浏览器视口(null)，建议取默认值 null 即可
默认值	null

参数名	observerOptions.rootMargin
类型	string
是否可选	是
说明	根容器 margin 值，建议取默认值 '0px' 即可
默认值	'0px'

参数名	observerOptions.threshold
类型	number \| number[]
是否可选	是
说明	图片进入与根容器交叉重叠范围的百分比阀值(0-1之间)，即进入可视范围多少百分比后进行加载，建议取默认值为 0 即可（刚进入可视边界即加载）
默认值	0

（完）

同时支持Vue2/Vue3的图片懒加载组件（支持懒加载 v-html 指令梆定的 html 内容）

🚀 vue-lazyload-imgs（LazyLoadImgs） 组件简介详情见：https://npmjs.com/package/vue-lazyload-imgs 安装方法： npm i vue-lazyload-imgs（不要安装为开发依赖，应为产品依赖） 适用环…...

编程日记 2025/9/21 10:43:04

Qt容器类在元对象系统中使用

解释 “QVector没有被注册到Qt的元对象系统中”这句话的意思是：QVector<double>这种数据类型没有被Qt的元对象系统（Meta-Object System）识别和管理。Qt的元对象系统是Qt框架的核心部分，它提供了信号与槽机制、动态属性系统…...

编程日记 2025/8/29 6:59:35

Qt中的信号与槽及其自定义

信号源：哪个控件发的信号信号的类型：用户进行不同的操作就会触发不同的信号如点击按钮，在输入框移动光标，勾选一个复选框，选择一个下拉框信号的处理方式：槽(slot)----也就是函数，Qt中用con…...

编程日记 2025/9/10 17:26:36

【已完结STM32】--自学江协科技笔记汇总

以下学习笔记代码均来自b站江协科技视频笔记汇总完结文章笔记对应江科大视频新建工程【2-2】新建工程江科大STM32-GPIO输出点亮LED，LED闪烁，LED流水灯，蜂鸣器（学习笔记）_unit32-t rcc-apb2periph-CSDN博客【3-1】…...

编程日记 2025/8/29 0:56:27

科技快讯 | 索诺瓦携手清华大学共筑听力无障碍未来；中国探月工程总设计师：未来月球上能打电话；Shopify要求员工证明AI无法取代其工作

索诺瓦携手清华大学共筑听力无障碍未来 2024年末，60岁以上人口超3.1亿，听力损失比例高达11%。清华大学无障碍发展研究院与索诺瓦集团深化合作，共同推动听力无障碍环境建设。2023年9月，《无障碍环境建设法》实施，2024年…...

编程日记 2025/9/19 0:53:36

[实战] 天线阵列波束成形原理详解与仿真实战（完整代码）

天线阵列波束成形原理详解与仿真实战 1. 引言在无线通信、雷达和声学系统中，波束成形（Beamforming）是一种通过调整天线阵列中各个阵元的信号相位和幅度，将电磁波能量集中在特定方向的技术。其核心目标是通过空间滤波增强目标方…...

编程日记 2025/9/19 8:47:42

北京自在科技：让万物接入苹果Find My网络的″钥匙匠″

在AirTag掀起全球防丢热潮的今天，越来越多的第三方产品开始接入苹果Find My网络——从充电宝到电动车，从行李箱到保温杯，用户只需打开iPhone的「查找」App，就能实时定位这些物品。北京自在科技有限责任公司早在苹果推出Find My开…...

编程日记 2025/9/12 8:05:08

区块链是怎么存储块怎么找到前一个块

前言：学习区块链的过程中在想怎么管理区块链呢 📌 推荐项目回顾： 👉 Jeiwan 的 blockchain_go 项目 GitHub 地址：https://github.com/Jeiwan/blockchain_go ❓它是怎么存储区块 & 找前一个区块的？ 项…...

编程日记 2025/9/8 12:08:04

聚类算法 ap 聚类谱聚类

AP聚类（Affinity Propagation Clustering）是一种基于消息传递的聚类算法，由Brendan J. Frey和Delbert Dueck于2007年提出。与传统的聚类算法（如K-Means）不同，AP聚类不需要预先指定聚类数量，而是…...

编程日记 2025/9/19 2:00:35

习题与正则表达式

思路： 二分查找： left 1（最小可能距离），right L（最大可能距离）。每次取 mid (left right) / 2，判断是否可以通过增设 ≤ K 个路标使得所有相邻路标的距离 ≤ mid。贪心验证…...

编程日记 2025/9/19 10:39:43

数据库管理工具实战：IDEA 与 DBeaver 连接 TDengine（一）

一、引言在当今数字化时代，数据如同企业的生命线，而数据库则是承载这些宝贵数据的关键基础设施。TDengine 作为一款高性能的时序数据库，在物联网、工业互联网、车联网、IT 运维等众多领域中发挥着举足轻重的作用。它以其卓越的性能、高效的…...

编程日记 2025/8/17 22:20:01

聚类Clustering和分类Classification的区别

目的： 聚类：旨在将数据集中的样本分成若干组（簇），使得同一组内的样本在某种意义上更相似，而不同组的样本差异更大。聚类是一种探索性分析，用于发现数据中的自然结构。分类：旨在根据已…...

编程日记 2025/9/20 16:13:03

对比 redis keys 命令，下次面试说用 scan

Redis SCAN 命令使用指南 SCAN 是 Redis 提供的一种非阻塞迭代器命令，用于逐步遍历 Redis 数据库中的键。相比于 KEYS 命令，SCAN 不会一次性加载所有键，因此对性能的影响较小，适合在生产环境中使用。以下是关于 SCAN 的详细用法…...

编程日记 2025/9/20 3:16:20

【Java设计模式】第6章抽象工厂模式讲解

6. 抽象工厂模式 6.1 抽象工厂讲解定义：提供一个接口创建一系列相关或依赖对象，无需指定具体类。核心概念：产品等级结构：同一类型的不同产品（如Java视频、Python视频）。产品族：同一工厂生产的多个产品（如Java视频 + Java手记）。适用场景：需要创建多个相关联的产品…...

编程日记 2025/9/19 1:31:56

设计模式 - 代理模式

代理模式代理模式是一种结构型设计模式，它允许你提供一个代理对象来控制对另一个对象的访问。代理模式可以在不改变原始对象的情况下，增强或控制对原始对象的访问。代理模式通常用于延迟加载、访问控制、日志记录、性能监控等场景。 1.静态代理静态…...

编程日记 2025/9/10 19:46:07

Unity-Xlua热更和AssetBundle详解

从今天开始我们深入Unity的组件，最近的一系列事让我明白学习技术不能只有广度，如走马观花，虽然你可能确实学到了皮毛，但是没有足够深厚的理解，是无法融入自己的东西的，那么你就只是在用别人的工具而不是自己…...

编程日记 2025/9/10 4:01:15

【企业级数据安全】掌握高性能Log4j2敏感信息脱敏方案

前言在数据安全合规日益严格的今天，日志中的敏感信息保护已成为企业IT建设的必备环节。本文带您深入了解如何打造一套高性能、可实时配置的Log4j2日志脱敏插件，轻松应对各类敏感数据保护需求，让您的系统既满足合规要求，又不牺牲…...

编程日记 2025/9/20 11:17:10

力扣刷题——606.根据二叉树创建字符串

给你二叉树的根节点 root ，请你采用前序遍历的方式，将二叉树转化为一个由括号和整数组成的字符串，返回构造出的字符串。空节点使用一对空括号对 "()" 表示，转化后需要省略所有不影响字符串与原始二叉树之间的一对一映…...

编程日记 2025/9/8 10:42:43

图像处理中的 Gaussina Blur 和 SIFT 算法

Gaussina Blur 高斯模糊高斯模糊的数学定义高斯模糊是通过高斯核(Gaussian Kernel) 对图像进行卷积操作实现的. 二维高斯函数定义为 G ( x , y , σ ) 1 2 π σ 2 e − x 2 y 2 2 σ 2 G(x, y, \sigma) \frac{1}{2\pi \sigma^2} e^{-\frac{x^2 y^2}{2\sigma^2}} G(x…...

编程日记 2025/9/20 5:19:06

AWS区块链游戏场景技术解决方案：全球节点与去中心化架构实践

一、区块链游戏的技术挑战与架构需求区块链游戏作为Web3领域的重要应用场景，其技术架构需要满足以下核心需求： 分布式账本的高效同步与共识验证智能合约的安全执行环境全球玩家的低延迟交互体验动态扩展的节点网络支持海量NFT资产的可靠存储 …...

编程日记 2025/9/20 23:08:15

AWS VPC深度解析:构建安全可靠的云网络基础设施

1. 引言在云计算时代,网络基础设施的重要性不言而喻。Amazon Web Services (AWS) 的Virtual Private Cloud (VPC)为用户提供了一个强大而灵活的网络环境,使他们能够在AWS云中构建安全、可扩展的应用程序。本文将全面剖析AWS VPC的核心特性,帮助读者深入理解如何利用VPC构建高…...

编程日记 2025/9/9 6:28:15

青少年编程与数学 02-016 Python数据结构与算法 08课题、图

青少年编程与数学 02-016 Python数据结构与算法 08课题、图一、图1. 图的基本概念1.1 定义1.2 顶点和边1.3 图的分类1.4 特殊术语 2. 图的表示方法1. 邻接矩阵（Adjacency Matrix）2. 邻接表（Adjacency List）3. 边列表（…...

编程日记 2025/9/9 11:25:42

微信小程序：动态表格实现，表头单元格数据完全从data中获取，宽度自定义，自定义文本框，行勾选，样式效果，横向滚动表格(解决背景色不足的问题)等

一、样式效果二、代码 1、wxml <view class"line flex flex-center"><view class"none" wx:if"{{info.length 0}}">暂无料号</view><view wx:else class"table-container">&…...

编程日记 2025/9/16 5:35:54

MySQL学习笔记集--游标

游标在MySQL中，游标（Cursor）是一种数据库对象，它允许您逐行处理查询结果集。游标通常与存储过程一起使用，因为它们需要在存储过程或函数中声明和操作。游标的使用涉及几个步骤：声明游标、打开游标、从游标…...

编程日记 2025/9/3 13:05:42

Microsoft Defender Antivirus Service服务占用CPU过高

下载火绒安全，用它替代 Microsoft Defender，并关闭 Microsoft Defender 两步禁用Windows Defender Antivirus Service_microsoft defender antivirus service-CSDN博客 Windows10/11家庭版关闭方法按 ‘Win键R’，输入 “regedit”&#…...

编程日记 2025/8/23 1:10:21

Ansible（7）——管理机密与事实

目录一、管理机密： 1、Ansible Vault ： 2、ansible-vault 命令行工具： （1）创建加密文件： （2）查看加密文件： （3）编辑现有加密文件&#xf…...

编程日记 2025/9/20 5:57:17

consul服务注册与发现（go）-学习笔记

参考博客 1、服务实例接口与默认实现 type ServiceInstance interface {// 获取服务实例的唯一IDGetInstanceId() string// 获取服务IDGetServiceId() string// 获取服务实例的主机名或IP地址GetHost() string// 获取服务实例的端口号GetPort() int// 判断服务实例是否使用HT…...

编程日记 2025/9/11 17:14:03

golang-defer延迟机制

defer延迟机制 defer是什么 defer是go中一种延迟调用机制。执行时机 defer后面的函数只有在当前函数执行完毕后才能执行。执行顺序将延迟的语句按defer的逆序进行执行，也就是说先被defer的语句最后被执行，最后被defer的语句，最先被执…...

编程日记 2025/9/19 18:52:56

字符串哈希算法详解：原理、实现与应用

字符串哈希是一种高效处理字符串匹配和比较的技术，它通过将字符串映射为一个唯一的数值（哈希值），从而在O(1)时间内完成子串的比较。本文将结合代码实现，详细讲解前缀哈希法的工作原理，并通过流程图逐步解析…...

编程日记 2025/9/7 1:27:38

python-Leetcode 65.搜索旋转排序数组

题目： 整数数组nums按升序排列，数组中的值互不相同在传递给函数之前，nums在预先未知的某个小标K上进行了旋转，使数组变为[nums[k], nums[k1], ..., nums[n-1], nums[0], nums[1], ..., nums[k-1]]，小标从0开始计数。…...

编程日记 2025/9/21 10:36:00

蓝桥杯 C/C++ 组历届真题合集速刷（二）

一、0ASC - 蓝桥云课 （单位换算）算法代码： #include <iostream> using namespace std; int main() {printf("%d",L);return 0; } 二、0时间显示 - 蓝桥云课 （单位换算）算法代码： #inclu…...

编程日记 2025/9/21 5:13:55

react的redux总结

目录一、Antd 1.1、基本使用 1.2、自定义主题二、Redux 2.1、工作流程 2.2、理解react-redux 2.3、优化 2.3.1、简写mapDispatch 2.3.2、Provider组件 2.4、数据共享 2.4.1、编写Person组件 2.4.2、Person组件的reducer 2.4.3、完成数据共享 2.5、求和案例 2.…...

编程日记 2025/9/18 19:27:54

MySQL视图

一、视图的本质与分类 1. 定义虚拟表：视图不存储数据，本质是保存的查询语句（SELECT），每次访问视图时动态执行查询并返回结果。逻辑抽象：基于一个或多个基表（或视图）创建&#xf…...

编程日记 2025/9/16 7:53:18

程序化广告行业（69/89）：电商素材制作与展示策略解析

程序化广告行业（69/89）：电商素材制作与展示策略解析在如今数字化营销的浪潮中，程序化广告成为众多企业精准触达目标客户的有力武器。作为一名在广告技术领域摸爬滚打多年的从业者，深知学习是不断进步的阶梯&#xff…...

编程日记 2025/9/20 6:58:33

【PCB工艺】发光二极管的原理

你真的知道发光二极管为什么会发光吗？ 而为什么另一部分二极管不会发光呢？ 这篇文章解释元器件发光二极管（LED）的底层原理。发光二极管（LED, Light Emitting Diode） 是一种能够将电能转换为光能的半导体…...

编程日记 2025/9/20 20:18:40

探秘 DeepSeek：开源生态如何推动 AI 技术普惠？

探秘 DeepSeek：开源生态如何推动 AI 技术普惠？引言在人工智能（AI）领域，技术的快速发展和广泛应用正在深刻改变我们的生活。然而，AI 的发展往往伴随着资源和技术的集中化问题，大型科技公司凭借其雄厚的资金和人才优势占据了主导地位，而中小企业、研究机构和个人开发…...

编程日记 2025/9/15 4:48:15

远程主机可能不符合glibc和libstdc++ VS Code服务器的先决条件

这是因为我最近更新了vscode， 服务器中有个GLIBC库，VSCode>1.86.0版本对低于v2.28.0版本的GLIBC不再满足需求。解决办法回退到之前能够连接服务器的版本。我之前用的是January 2025 (version 1.97) vscode旧版本下载地址...

编程日记 2025/9/9 1:34:21

JVM性能调优：参数配置×内存诊断×GC调优实战

🚀前言 “你的Java应用是否还在经历莫名卡顿？半夜被OOM报警惊醒？GC日志像天书看不懂？ 本文将用20个真实案例50个关键参数，带你掌握： 参数调优：如何用-XX:UseG1GC让GC暂停从秒级降到毫秒级&…...

编程日记 2025/9/15 4:48:19

pg_waldump 使用方法和输出验证

目录 pg_waldump 使用方法和输出验证一、pg_waldump 基础用法二、验证输出文件正确性三、关键参数 -p 的作用四、验证示例五、注意事项 pg_waldump 使用方法和输出验证一、pg_waldump 基础用法命令格式 pg_waldump [选项] [WAL文件路径]-p, --pgdataDIR：指定 Pos…...

编程日记 2025/9/4 6:32:11

Android 定制飞行模式和通话中设置菜单置灰

业务背景定制需求实现目标：通话中禁用移动网络设置中的网络模式和APN入口。 Google原生行为分析在原生Android中： 飞行模式： 无法在通话中开启：系统会自动阻止，因飞行模式会断开通话所需的射频。APN/网络模式修改…...

编程日记 2025/9/12 21:58:08

C# System.Text.Json 中 ReferenceHandling 使用详解

总目录一、什么是 ReferenceHandling？ 1. 概述 ReferenceHandling 是 System.Text.Json 中用于处理对象引用（循环引用或重复引用）的选项。它允许开发者在序列化和反序列化时控制如何处理对象之间的引用关系。默认情况下，Syst…...

编程日记 2025/9/12 5:19:10

【开发经验】调试OpenBMC Redfish EventService功能

EventService功能是Redfish规范中定义的一种事件日志的发送方式。用户可以设置订阅者信息(通常是一个web服务器)，当产生事件日志时，OpenBMC可以根据用户设置的订阅者信息与对日志的筛选设置，将事件日志发送到订阅者。相比于传统的SNMPTrap日…...

编程日记 2025/9/20 8:49:02

【AI工具】FastGPT：开启高效智能问答新征程

前言在人工智能飞速发展的当下，各类 AI 工具如雨后春笋般涌现。FastGPT 作为一款基于大语言模型（LLM）的知识图谱问答系统，凭借其强大的数据处理和模型调校能力，为用户带来了便捷的使用体验。今天，就让我们…...

编程日记 2025/9/21 4:55:56

4.8学习总结贪心算法+Stream流

贪心算法： 找到局部最优->从而推导全局最优。 Java练习： 获取随机验证码： import java.util.*; import java.util.function.BiConsumer; public class test {public static void main(String[] args) {System.out.println(createCode(…...

编程日记 2025/9/16 7:24:04

入选ICLR‘25 Spotlight！深度强化学习(DRL)迎来新突破！

近年来，深度强化学习相关的成果在顶会顶刊上接受度普遍较高，经常上榜ICLR、Nature、Science等。比如ICLR 2025上的一篇Spotlight，由清华团队提出，介绍了一种SmODE网路，让深度强化学习的控制更加丝滑！ 另外…...

编程日记 2025/9/18 12:52:40

【学习笔记】HTTP和HTTPS的核心区别及工作原理

一、基础概念 HTTP（超文本传输协议）：明文传输数据，默认端口80，容易被窃听或篡改。 HTTPS（HTTP SSL/TLS）：通过加密传输数据，默认端口443，保障安全性。二、…...

编程日记 2025/9/11 18:27:53

gbase8s之数据字典导出脚本（完美）

有时我们需要将表结构转换成数据库设计文档（WORD或者其他格式），这时需要使用脚本将表结构导出，转换成可用格式。该脚本适用于GBase 8s小版本号在3.0之后的版本（含有syscolumnsext、syscomments以及syscolcomments表&a…...

编程日记 2025/9/16 3:54:22

java整合socket通信全流程

前言大家好，由于工作上业务的需要，在java项目中引入了socket通信，特此记录一下，用以备份，本文章中的socket通信实现了，服务端与客户端的双向通讯，以及二者之间的心跳通信，服务端重启之后，客户端的自动重连功能。原理 Socket通信是计算机网络中常用的一种通信机制…...

编程日记 2025/9/6 20:38:46

【scikit-learn基础】--『预处理』之正则化

数据的预处理是数据分析，或者机器学习训练前的重要步骤。通过数据预处理，可以提高数据质量，处理数据的缺失值、异常值和重复值等问题，增加数据的准确性和可靠性整合不同数据，数据的来源和结构可能多种多样&#xff…...

编程日记 2025/9/18 17:29:17

WHAT - React 使用 Hook 分离计算逻辑与渲染逻辑

目录原始代码如何优化1. 函数式简洁风格2. hook 封装（重点）3. 性能优化原始代码 const GoodList ({ goods }) > {if (goods.length 0) {return <>暂无数据</>;}let totalCount 0;let totalPrice 0;goods.forEach((good) > {tot…...

编程日记 2025/9/19 7:01:46

🚀 vue-lazyload-imgs（LazyLoadImgs） 组件简介

🚀 安装方法

🚀 使用方法

方法一：全局使用

(a)、全局注册 For Vue2（Vue >=2.6.x，并且 <=2.7.x）：

(b)、全局注册 For Vue3（Vue >=3.x.x）：

方法二：局部（组件内）使用

🚀 Props 参数说明

以下所有参数均具有默认值，均为可选参数，绝大多数情况下，本组件不用指定以下任何参数，即可实现图片懒加载功能。

（完）

相关文章：

🚀 vue-lazyload-imgs（LazyLoadImgs）组件简介