前端提高性能——使用Intersection Observer API对图片视频进行懒加载
前言
最近做了一个项目是类似于商城的,需要放很多图片,在用户选择一页五十条时,页面加载速度会比较慢。为了提高性能,选择用Intersection Observer API 实现图片懒加载。
实现步骤
一、html代码:
<img class="imgCla" data-src="@/assets/img/bigPng1.png" alt="" />
这里用“data-src”代替了src,用来标记需要使用懒加载的图片,后面以便操作
二、css样式:
.imgCla {width: 300px;height: 400px;object-fit: cover;//对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等background-color: #f0f0f0;
}
三、js代码:
const images = document.querySelectorAll("img[data-src]");const options = {rootMargin: "0px",threshold: 0.5,};const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {const img = entry.target;const src = img.getAttribute("data-src");img.setAttribute("src", src);img.removeAttribute("data-src");observer.unobserve(img);}});}, options);images.forEach((img) => {observer.observe(img);});
注:这里是使用 Intersection Observer API 监视图片元素是否进入视口,进入视口之后再将data-src改为src
bug描述:
原生写法的话按理来说此刻应该可以了,但是我写在vue2项目里发现图片加载不出来,如下图:

检查过代码逻辑没有什么问题之后,我写了一个正常的没有懒加载的图片,是正常显示的,检查了network之后发现了问题:

正常显示的图片路径是 :http://localhost:9528/static/img/bigPng1.1ca7e5c0.png
因为正常直接加载图片时,webpack将图片进行了处理,但是使用懒加载的图片没有被打包工具处理
解决步骤:
1、调整webpak配置,在 chainWebpack 方法中查找到处理 SVG 文件的规则,类似地,可以添加相应的规则来处理其他类型的图片文件
在vue.config.js的chainWebpack中加入代码:
config.module.rule("images").test(/\.(png|jpe?g|gif)(\?.*)?$/).use("url-loader").loader("url-loader").options({limit: 8192, // 如果小于 8kb,转换为 base64 格式name: "assets/img/[name].[ext]", // 图片输出路径和名称配置}).end();
2、将刚开始的html里面的img标签路径调整一下:
<img class="imgCla" data-src="assets/img/bigPng1.png" alt="" />
效果展示:

相关文章:
前端提高性能——使用Intersection Observer API对图片视频进行懒加载
前言 最近做了一个项目是类似于商城的,需要放很多图片,在用户选择一页五十条时,页面加载速度会比较慢。为了提高性能,选择用Intersection Observer API 实现图片懒加载。 实现步骤 一、html代码: <img class&qu…...
杂七杂八111
MQ 用处 一、异步。可提高性能和吞吐量 二、解耦 三、削峰 四、可靠。常用消息队列可以保证消息不丢失、不重复消费、消息顺序、消息幂等 选型 一Kafak:吞吐量最大,性能最好,集群高可用。缺点:会丢数据,功能较单一。 二Ra…...
微信小程序(一)
WebView app.是全局配置,app.json是全局配置文件,在页面的.json配置文件中的配置会覆盖我们全局的配置 快捷键: .box 敲回车 ----- <view class"box"></view> .row*8 敲回车: .row{$}*8 敲回车 案例1&…...
【DL经典回顾】激活函数大汇总(十二)(GLU ReGLU附代码和详细公式)
激活函数大汇总(十二)(GLU & ReGLU附代码和详细公式) 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里,激活函数扮演着不可或…...
【C++】string类初步介绍
个人主页 : zxctscl 如有转载请先通知 文章目录 1. 为什么学习string类1.1 C语言中的字符串1.2 推荐学习网站 2. 标准库中的string类2.1 string类2.2 string类的常用接口说明2.2.1 constructor2.2.2 遍历string2.2.2.1 下标加[]遍历2.2.2.2 迭代器(itera…...
HCIP --- BGP 综合实验
目录 实验拓扑图: 实验要求: 实验步骤: 1.划分IP地址 R1的配置 R2的配置 R3的配置 R4的配置 R5的配置 R6的配置 R7的配置 R8的配置 2.检测查询IP地址 3.OSPF 建邻 4.查询OSPF 建邻是否成功 5.AS 2 内部BGP 建邻 a. AS 2 内部 IBG…...
【优选算法】专题1 -- 双指针 -- 移动零
前言: 📚为了提高算法思维,我会时常更新这个优选算法的系列,这个专题是关于双指针的练习 🎯个人主页:Dream_Chaser~-CSDN博客 一.移动零(easy) 描述: 「数组分两块」是⾮…...
【计算机视觉】二、图像形成:2、几何基元和几何变换:2D变换
文章目录 一、向量和矩阵的基本运算二、几何基元和变换1、几何基元(Geometric Primitives)2、几何变换(Geometric Transformations)1. 各种变换的关系2. 变换公式3. 2D变换的层次4. python实现 一、向量和矩阵的基本运算 【计算机视觉】二、图像形成:1、向量和矩阵…...
蓝桥杯---棋盘(典型的二维差分问题)
题目链接:棋盘 这道题真的是非常典型的二维差分问题了(在我个人看来),题目中的0和1,我们直接让差分数组,偶数就是0,奇数就是1.初始化是0,是白子(偶数)&#x…...
OpenHarmony教程指南—ArkTS时钟
简单时钟 介绍 本示例通过使用ohos.display 接口以及Canvas组件来实现一个简单的时钟应用。 效果预览 使用说明 1.界面通过setInterval实现周期性实时刷新时间,使用Canvas绘制时钟,指针旋转角度通过计算得出。 例如:"2 * Math.PI /…...
uniapp遇到的问题
【uniapp】小程序中input输入框的placeholder-class不生效解决办法 解决:写在scope外面 uniapp设置底部导航 引用:https://www.jianshu.com/p/738dd51a0162 【微信小程序】moveable-view / moveable-area的使用 https://blog.csdn.net/qq_36901092/…...
oppo前端开发一面
提问: 1. 谈谈你怎么实现响应式布局 2. 谈谈你对weback的了解,vite和webpack的区别,webpack loader 3. 你项目怎么用CI/CD(不懂,只知道自动化部署了😭) 4. ts中type和interface区别 5. axi…...
案例分析篇09:Web架构设计相关20个考点(7~11)(2024年软考高级系统架构设计师冲刺知识点总结)
专栏系列文章推荐: 2024高级系统架构设计师备考资料(高频考点&真题&经验)https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】(2024年软考高级系统架构设计师冲刺知识点总结-案例分析篇-…...
为什么“玄学”与营销联系?媒介盒子分析
在去年有年轻人在上班与上进之中,选择上香,而今年有咖啡品牌买咖啡送木鱼,还有香飘飘在普陀山吸好运,望山楂直接覆盖香火最旺的寺庙,玄学营销的势头甚至盖过了联名营销,呈现节点化的趋势。为什么会这样&…...
C++常用容器总结
容器分为三类,顺序容器,关联容器和适配器。顺序容器又分为连续的容器(vector,array),顺序容器中的离散容器(list,slist,forward_list),离连形的de…...
C# Onnx C2PNet 图像去雾 室外场景
目录 介绍 效果 模型信息 项目 代码 下载 C# Onnx C2PNet 图像去雾 室外场景 介绍 github地址:https://github.com/YuZheng9/C2PNet [CVPR 2023] Curricular Contrastive Regularization for Physics-aware Single Image Dehazing 效果 模型信息 Model P…...
【English Learning】Day13
2024/03/14 和小录打卡的第13天 目录 Words & phrases Words & phrases incrredibly incredibly busy 超级忙merely not merely 不仅仅tragedy a terible tregedy 可怕的悲剧a personal tragedy 个人遭遇strive strive to be best 努力做最好的strive for peace 为和平…...
智障版本GPT3实现
背景,实现GPT3,采用python代码。调库hf及tf2.0+基础。 由于完全实现GPT模型及其预训练过程涉及大量的代码和计算资源,以下是一个基于TensorFlow 2.x的简化版GPT模型构建和调用的示例。请注意,这仅展示了模型的基本结构,实际运行需替换为真实数据集和预处理步骤,且无法直…...
【ubuntu】安装 Anaconda3
目录 一、Anaconda 说明 二、操作记录 2.1 下载安装包 2.1.1 官网下载 2.1.2 镜像下载 2.2 安装 2.2.1 安装必要的依赖包 2.2.2 正式安装 shell 和 base 的切换 2.2.3 检测是否安装成功 方法一 方法二 方法三 2.3 其他 三、参考资料 3.1 安装资料 3.2 验证是否…...
代码随想录|Day20|二叉树09|669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树
669. 修剪二叉搜索树 思路:利用二叉搜索树的性质,对于每个节点,判断其是否在区间内: 如果节点值 < low,则此节点和其左子树都不在范围内如果节点值 > high,则此节点和其右子树都不在范围内如果 low &…...
Virtual-Display-Driver:Windows虚拟显示器的全能解决方案深度解析
Virtual-Display-Driver:Windows虚拟显示器的全能解决方案深度解析 【免费下载链接】Virtual-Display-Driver Add virtual monitors to your windows 10/11 device! Works with VR, OBS, Sunshine, and/or any desktop sharing software. 项目地址: https://gitco…...
FASTDDS-Python 实战:从零构建分布式通信环境
1. 为什么选择Fast DDS-Python? 在物联网和机器人系统中,设备间的实时通信是个硬需求。想象一下,你正在开发一个智能仓储机器人系统,需要让多台机器人在复杂环境中协同工作。这时候,传统的HTTP请求-响应模式就显得力不…...
OpenMV串口数据收发实战:如何与Arduino/STM32稳定通信并解析指令
OpenMV与微控制器串口通信实战:从基础协议到工业级稳定性优化 在智能机器人、自动化检测设备等嵌入式视觉系统中,OpenMV常作为"视觉传感器"与主控微控制器(如Arduino/STM32)协同工作。我曾参与过一个AGV小车项目&#x…...
嵌入式开发调试宏与性能优化实战
1. 嵌入式开发调试宏的妙用在嵌入式开发中,调试是最耗时耗力的环节之一。每次修改代码后都需要重新烧录、运行、观察结果,这个过程往往要重复数十次。而合理使用编译器提供的调试宏,可以大幅提升调试效率。1.1 基础调试宏解析GCC编译器提供了…...
生物信息学实战指南 | GSEA富集分析从原理到R语言实现
1. GSEA富集分析入门:为什么它比传统方法更强大 第一次接触GSEA(Gene Set Enrichment Analysis)时,我和大多数初学者一样困惑:明明已经有GO和KEGG这些传统富集分析方法了,为什么还要用GSEA?直到…...
LogonTracer核心功能深度解析:4624、4625等关键事件ID的实战应用
LogonTracer核心功能深度解析:4624、4625等关键事件ID的实战应用 【免费下载链接】LogonTracer Investigate malicious Windows logon by visualizing and analyzing Windows event log 项目地址: https://gitcode.com/gh_mirrors/lo/LogonTracer LogonTrace…...
炉石传说HsMod插件终极指南:55项免费功能解锁全新游戏体验
炉石传说HsMod插件终极指南:55项免费功能解锁全新游戏体验 【免费下载链接】HsMod Hearthstone Modify Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod 你是否厌倦了炉石传说中冗长的动画等待?是否想要更流畅的游戏体…...
技术无罪,人心可畏 —— 写在 315 “GEO 投毒” 话题之后
2026 年央视 315 晚会,将镜头对准了人工智能领域的灰色地带 ——“AI 投毒” 与 “GEO” 一夜之间成为公众热议的话题。记者虚构了一款名为 “Apollo-9” 的智能手环,借助 “GEO 优化系统” 批量生成虚假内容,短短数小时就让多个主流 AI 大模…...
Phi-4-mini-reasoning部署教程:容器化打包(Dockerfile)+ NVIDIA Container Toolkit
Phi-4-mini-reasoning部署教程:容器化打包(Dockerfile) NVIDIA Container Toolkit 1. 项目概述 Phi-4-mini-reasoning是微软推出的3.8B参数轻量级开源模型,专为数学推理、逻辑推导、多步解题等强逻辑任务设计。这款模型主打&quo…...
SM4算法在嵌入式平台的轻量化移植与优化实践
1. SM4算法与嵌入式平台适配挑战 SM4作为我国自主设计的商用分组密码标准,在物联网设备安全领域应用广泛。但直接将OpenSSL中的SM4实现移植到STM32等嵌入式平台时,开发者常会遇到三大难题: 代码体积膨胀:OpenSSL的SM4实现依赖大量…...
