微信小程序实现图片懒加载的4种方案
实现图片懒加载的意义
实现图片懒加载可以提高小程序的性能和用户体验,是微信小程序开发中非常重要的一项优化手段。微信小程序实现图片懒加载的目的主要有以下几点:
- 提高页面加载速度:图片通常是页面中最耗时的资源,如果一次性加载所有图片,会导致页面加载速度变慢,从而影响用户体验。通过图片懒加载,可以只加载当前可见区域内的图片,提高页面加载速度。
- 减少流量消耗:在移动网络环境下,流量是一种珍贵资源,如果一次性加载所有图片,会导致流量消耗过大,从而影响用户体验。通过图片懒加载,可以只加载当前可见区域内的图片,减少流量消耗。
- 优化内存使用:如果一次性加载所有图片,会导致小程序占用过多的内存,从而影响小程序的稳定性和性能。通过图片懒加载,可以只加载当前可见区域内的图片,优化内存使用。
- 提高用户体验:通过图片懒加载,可以只加载当前可见区域内的图片,避免用户需要等待过长时间才能看到页面内容,从而提高用户体验。
微信小程序中实现图片懒加载的方案
一. 使用 wx:if 条件渲染
这种方案是将图片的 src 属性设置为一个空字符串,然后在需要显示图片时,通过 wx:if 条件渲染来动态设置 src 属性,从而实现图片的懒加载。具体实现步骤如下:
- 在 WXML 文件中,使用 wx:if 条件渲染来判断图片是否需要显示。
<image wx:if="{{showImage}}" src="{{imageSrc}}" mode="aspectFill"></image>
- 在 JS 文件中,定义一个变量
showImage
,初始值为false
,表示图片不显示。
Page({data: {showImage: false,imageSrc: ''},onLoad: function () {// 在页面加载时,获取图片的 URLconst imageUrl = 'https://example.com/image.jpg'this.setData({imageSrc: imageUrl})},onImagesLoaded: function () {// 在图片加载完成后,设置 showImage 为 true,显示图片this.setData({showImage: true})}
})
- 在 WXML 文件中,为 image 组件绑定 bindload 事件,在图片加载完成后触发 onImagesLoaded 函数。
<image wx:if="{{showImage}}" src="{{imageSrc}}" mode="aspectFill" bindload="onImagesLoaded"></image>
二. 使用 IntersectionObserver 组件
这种方案是使用微信小程序提供的 IntersectionObserver 组件,来监听图片是否出现在可视区域内,从而实现图片的懒加载。具体实现步骤如下:
- 在 WXML 文件中,使用 IntersectionObserver 组件来监听图片是否出现在可视区域内。
<view class="image-wrapper"><image class="image" src="{{imageSrc}}" mode="aspectFill"></image>
</view>
<intersection-observer class="observer" bindintersection="onIntersection"></intersection-observer>
- 在 JS 文件中,定义一个变量
imageSrc
,初始值为一个空字符串,表示图片不显示。
Page({data: {imageSrc: ''},onLoad: function () {// 在页面加载时,获取图片的 URLconst imageUrl = 'https://example.com/image.jpg'this.setData({imageSrc: imageUrl})},onIntersection: function (res) {// 在图片出现在可视区域内时,设置 imageSrc 为图片的 URLif (res.intersectionRatio > 0) {this.setData({imageSrc: res.target.dataset.src})}}
})
- 在 WXML 文件中,为 image 组件设置 data-src 属性,用于存储图片的 URL。
<image class="image" data-src="{{imageSrc}}" mode="aspectFill"></image>
- 在 JS 文件中,为 IntersectionObserver 组件绑定 bindintersection 事件,在图片出现在可视区域内时触发 onIntersection 函数。
<intersection-observer class="observer" bindintersection="onIntersection"></intersection-observer>
三. 使用自定义组件
可以创建一个自定义组件,将图片的 URL 和是否显示图片的状态封装在组件内部,然后在页面中使用自定义组件来实现图片的懒加载。具体实现步骤如下:
- 创建一个自定义组件,例如
lazy-image
。 - 在自定义组件的 WXML 文件中,使用 image 组件来显示图片,并使用 wx:if 条件渲染来判断图片是否需要显示。
<image wx:if="{{showImage}}" src="{{imageSrc}}" mode="aspectFill"></image>
- 在自定义组件的 JS 文件中,定义一个变量
showImage
,初始值为false
,表示图片不显示。
Component({properties: {src: String},data: {showImage: false},ready: function () {// 在组件准备完毕后,设置 imageSrc 为图片的 URLthis.setData({imageSrc: this.properties.src})},attached: function () {// 在组件附加到页面节点树时,监听组件的可视状态this.observer = wx.createIntersectionObserver(this, {observeAll: true})this.observer.relativeToViewport({bottom: 0})this.observer.observe('.image', res => {if (res.intersectionRatio > 0) {this.setData({showImage: true})}})},detached: function () {// 在组件从页面节点树移除时,取消监听组件的可视状态this.observer.disconnect()}
})
- 在页面的 WXML 文件中,使用自定义组件来显示图片。
<lazy-image src="https://example.com/image.jpg"></lazy-image>
四. 使用 scroll-view 组件
可以使用 scroll-view 组件来实现图片的懒加载,具体实现步骤如下:
- 在 WXML 文件中,使用 scroll-view 组件来显示图片列表。
<scroll-view scroll-y="true" bindscrolltolower="loadMore"><image wx:for="{{images}}" wx:key="index" src="{{item}}" mode="aspectFill"></image>
</scroll-view>
- 在 JS 文件中,定义一个变量
images
,用于存储图片的 URL 数组。
Page({data: {images: []},onLoad: function () {// 在页面加载时,获取图片的 URL 数组const images = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg']this.setData({images: images})},loadMore: function () {// 在滚动到页面底部时,加载更多图片const images = this.data.imagesconst newImages = ['https://example.com/image4.jpg', 'https://example.com/image5.jpg', 'https://example.com/image6.jpg']this.setData({images: images.concat(newImages)})}
})
- 在 WXML 文件中,为 scroll-view 组件绑定 bindscrolltolower 事件,在滚动到页面底部时触发 loadMore 函数,从而实现图片的懒加载。
<scroll-view scroll-y="true" bindscrolltolower="loadMore"><image wx:for="{{images}}" wx:key="index" src="{{item}}" mode="aspectFill"></image>
</scroll-view>
总之,这些方法都可以实现微信小程序中的图片懒加载,具体使用哪种方法取决于具体的需求和场景。
相关文章:
微信小程序实现图片懒加载的4种方案
实现图片懒加载的意义 实现图片懒加载可以提高小程序的性能和用户体验,是微信小程序开发中非常重要的一项优化手段。微信小程序实现图片懒加载的目的主要有以下几点: 提高页面加载速度:图片通常是页面中最耗时的资源,如果一次性…...

各大pdf转word软件都用的哪家的ocr引擎?
国内一般的PDF软件一般都调用某国际PDF原厂的OCR接口,但这家公司是主要做PDF,在OCR方面并不专注,一些不是很复杂的场景还能应付得过来,复杂一点的效果就强差人意了,推荐用金鸣表格文字识别系统,它主要有以下…...
学习没有速成可言
那些声称几天就能让你精通软件的书籍,往往是夸大其词的宣传。学习软件需要时间和实践,没有什么快速的捷径可以让你在短时间内成为专家。 对于速成软件书,我个人持保留态度。它们可能提供一些基础知识和技巧,可以给初学者一个入门…...

快速上手Pytrch爬虫之爬取某应图片壁纸
一、前置知识 1 爬虫简介 网络爬虫(又被称作网络蜘蛛、网络机器人,在某些社区中也经常被称为网页追逐者)可以按照指定的规则(网络爬虫的算法)自动浏览或抓取网络中的信息。 1.1 Web网页存在方式 表层网页指的是不需要提交表单&…...

如何在Apache Arrow中定位与解决问题
如何在apache Arrow定位与解决问题 最近在执行sql时做了一些batch变更,出现了一个 crash问题,底层使用了apache arrow来实现。本节将会从0开始讲解如何调试STL源码crash问题,在这篇文章中以实际工作中resize导致crash为例,引出如何…...

[ Linux ] git工具的基本使用(仓库的构建,提交)
1.安装git yum install -y git 2.打开Gitee,创建你的远程仓库,根据提示初始化本地仓库(这里以我的仓库为例) 新建好仓库之后跟着网页的提示初始化便可以了 3.add、commit、push三板斧 git add . //add仓库新增(变…...

怎样去保证 Redis 缓存与数据库双写一致性?
解决方案 那么我们这里列出来所有策略,并且讨论他们优劣性。 先更新数据库,后更新缓存先更新数据库,后删除缓存先更新缓存,后更新数据库先删除缓存,后更新数据库 先更新数据库,后更新缓存 这种方法是不推…...

RuoYi-Vue若依框架-新增子模块启动后,前端页面报接口404
如何新建子模块可以参考RuoYi-Vue若依框架-如何新增子模块 我在新增依赖的时候提过版本号的问题,如果不是按照我的博客走的,然后接口报了404,可以选择添加父版本号,官方的参考文档是没写的,但添加了确实能解决这个问题…...
node.js 常见命令
1. npm init: 初始化一个新的Node.js项目,创建一个package.json文件。 2. npm install: 安装项目所需的所有依赖项。 3. npm run: 运行在package.json文件中定义的脚本。 4. node index.js: 运行一个Node.js文件。 5. node -v: 查看当前安装的Node.js版本号。 6. np…...

教育信创,重磅发布!Coremail联合飞腾发布全场景教育信创白皮书
3月28日,Coremail参与编制的《教育行业数字化自主创新 飞腾生态解决方案白皮书》正式发布。白皮书历时一年,由25所代表院校、66位专家,119家生态伙伴共同编写。 本次白皮书围绕教育数字化转型和信创人才培养两大领域,聚焦办公、教…...

滑动窗口_水果成篮_C++
题目: 题目解析: fruits[i]表示第i棵树,这个fruits[i]所表示的数字是果树的种类例如示例1中的[1,2,1],表示第一棵树 的种类是 1,第二个树的种类是2 第三个树的种类是1随后每一个篮子只能装一种类型的水果,我…...

线程的状态:操作系统层面和JVM层面
在操作系统层面,线程有五种状态 初始状态:线程被创建,操作系统为其分配资源。 可运行状态(就绪状态):线程被创建完成,进入就绪队列,参与CPU执行权的争夺。或因为一些原因,从阻塞状态唤醒的线程…...
在Isaac-sim中弧度转四元数以及四元数转弧度的问题
问题: 在Isaac-sim中如果采用set_world_pose()和get_world_pose()得到的都是四元数,如何将弧度转四元数,或者将四元数转为弧度是需要解决的一个问题, 这里的弧度是以x轴为0度,y轴为90度,逆时针方向逐渐增大…...

【计算机网络】高级IO模型
高级IO模型 一、 理解 IO二、认识五种高级 IO 模型1. 阻塞 IO2. 非阻塞IO3. 信号驱动 IO4. IO 多路转接5. 异步 IO 三、高级 IO 重要概念1. 阻塞和非阻塞2. 同步通信和异步通信 四、非阻塞 IOfcntl 一、 理解 IO 当我们调用系统接口 write、read 的时候,本质是把数…...

LabVIEW电动汽车直流充电桩监控系统
LabVIEW电动汽车直流充电桩监控系统 随着电动汽车的普及,充电桩的安全运行成为重要议题。通过集成传感器监测、单片机技术与LabVIEW开发平台,设计了一套电动汽车直流充电桩监控系统,能实时监测充电桩的温度、电压和电流,并进行数…...

前端学习<二>CSS基础——08-CSS属性:定位属性
CSS的定位属性有三种,分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 -->position: relative; <!-- 相对定位 -->position: fixed; <!-- 固定定位 --> 下面逐一介绍。 相对定位 相对定位:让…...
88. 合并两个有序数组(javascript)
给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m 和 n ,分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中,使合并后的数组同样按 非递减顺序 排列。 注意:最终,合并后数组…...
机器学习_集成学习_梯度提升_回归_决策树_XGBoost相关概念
目录 1. 机器学习 使用监督吗?什么又是监督学习? 2. 与XGBoost 类似的机器学习方法有哪些? 3. 随机森林方法 和 梯度提升方法 有什么区别? 分别应用于什么场景? 4. 决策树回归方法 和 Gradient Boosting类回归方法…...

ABAP 字段类型不一样导致相加之后金额错误
文章目录 ABAP 字段类型不一样导致相加之后金额错误写在前面的总结示例程序1汇总MSEG表和MLDOC表 ABAP 字段类型不一样导致相加之后金额错误 写在前面的总结 如果需要不同底表的字段相加的值,那么最好是根据条件去分别算出那些值放在临时内表里面,再去…...

【L1距离和L2距离】Manhattan Distance Euclidean Distance 解释和计算公式
距离度量 特征空间中两个实例点的距离可以反映出两个实力点之间的相似性程度,使用的距离可以是欧式距离,也可以是其他距离。 欧氏距离(L2距离):最常见的两点之间或多点之间的距离表示法,又称之为欧几里得度量,它定义于…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目,该项目是一个 Spring AI 快速入门的样例工程项目,旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计,每个模块都专注于特定的功能领域,便于学习和…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...

MySQL的pymysql操作
本章是MySQL的最后一章,MySQL到此完结,下一站Hadoop!!! 这章很简单,完整代码在最后,详细讲解之前python课程里面也有,感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...