微信小程序如何利用createIntersectionObserver实现图片懒加载

微信小程序如何利用createIntersectionObserver实现图片懒加载

  • 节点布局相交状态 API
    可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

  • 节点布局相交状态 API中有一个 wx.createIntersectionObserver(Object this, Objectoptions)
    Api (支持版本 >= 1.9.3),它的作用是创建并返回一个 IntersectionObserver
    对象实例(交叉区域),这个对象实例在小程序的解说如下:

  • IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见,它有:relativeTo、relativeToViewport、observe、disconnect等方法

  • 由此我们可以设置图片进入可见界面某一区域时的监听回调事件,以此实现图片的懒加载

 Page({data: {group: [{src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",show: false,def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"},...... // 更多图片信息]},onLoad: function () {let group = this.data.group  // 获取原数据for (let i in group) {// 设置监听回调事件,当元素 .loadImg{{i}},进入页面20px内就触发回调事件,设置图片为真正的图片,通过show控制wx.createIntersectionObserver().relativeToViewport({ bottom: 20 }).observe('.loadImg' + i, (ret) => {if (ret.intersectionRatio > 0) {group[i].show = true}this.setData({ // 更新数据group})})}}})
<block wx:for="{{group}}" wx:key="1"><view class="loadImg loadImg{{index}} {{item.show? 'active' : ''}}" ><!-- 通过条件判断确认图片的src --><image wx:if='{{item.show}}' style='width:100%;height:100%;' src='{{item.src}}'></image><image wx:else style='width:20%;height:20%;margin:0 auto;margin-top:50%;transform:translateY(-50%);' src='{{item.def}}' mode='aspectFit'></image></view></block>
.loadImg{width:100vw;height:46.3vw;transition: all .2s ease-in-out;opacity: 0;}.loadImg.active{opacity: 1}

到这里也就结束了,希望对您有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/231971.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Logback技术专题】「入门到精通系列教程」深入探索Logback日志框架的原理分析和开发实战技术指南(上篇)

深入探索Logback日志框架的原理分析和开发实战指南系列 Logback日志框架Logback基本模块logback-corelogback-classiclogback-accessLogback的核心类LoggerAppenderLayoutLayout和Appender filterlogback模块和核心所属关系 Logbackj日志级别日志输出级别日志级别介绍 Logback的…

JAVA基础知识:网络编程

网络编程是现代软件开发中不可或缺的一部分&#xff0c;它使得我们能够通过网络连接和交互&#xff0c;实现数据传输和通信。Java作为一种广泛应用于网络编程的编程语言&#xff0c;提供了丰富的库和工具&#xff0c;使得开发者能够轻松地构建强大的网络应用程序。本文将详细介…

向华为学习:基于BLM模型的战略规划研讨会实操的详细说明,含研讨表单(四)

2023年只剩下不到10天了&#xff0c;如何科学、系统地制定2024年的公司战略&#xff1f;如果您还没有找到好的方法&#xff0c;或者对过去的方法不是很满意&#xff0c;或者想探索习方法&#xff0c;不妨来看看华为和许多标杆企业在用的——基于BLM模型来组织战略规划。 前面三…

Word写大论文常见问题(持续更新)

脚注横线未定格 解决方案&#xff1a;“视图”-“草图”&#xff0c;“引用”-“显示备注”-选择“脚注分隔符”&#xff0c;把横线前的空格删掉。 2.PPT做的图插入word中清晰度太低 解决方案&#xff1a;PPT-图形-“另存为图片”-“可缩放矢量图格式”-粘贴到word中。 3.E…

Linux - 非root用户使用systemctl管理服务

文章目录 方式一 &#xff08;推荐&#xff09;1. 编辑sudoers文件&#xff1a;2. 设置服务文件权限&#xff1a;3. 启动和停止服务&#xff1a; 方式二1. 查看可用服务&#xff1a;2. 选择要配置的服务&#xff1a;3. 创建自定义服务文件&#xff1a;4. 重新加载systemd管理的…

【可用性】Redis作为注册中心配合Spring Task的高可用案例

需求&#xff1a; 假设当前有一个短信服务是多节点集群部署&#xff0c;我们希望每个服务节点在启动时能将服务信息"注册"到redis缓存中&#xff0c;所有服务节点每隔3分钟上报一次&#xff0c;表示当前服务可用。每个服务还会作为哨兵节点每隔10分钟查询一次redis&a…

CRM客户登记管理系统:企业数字化转型的必备工具

客户登记管理系统&#xff08;CRM&#xff09;是一种用于记录和管理客户信息的软件系统。它用于存储和跟踪客户的基本信息、联系方式、交易历史、服务请求等关键数据&#xff0c;以便企业能够更好地了解客户、提供个性化的服务&#xff0c;并进行有效的销售和营销活动。 CRM系统…

扫描电镜操作的注意点有哪些

扫描电子显微镜&#xff08;SEM&#xff09;是一种高分辨率的显微镜&#xff0c;用于观察微观尺度的表面形貌。在操作SEM时&#xff0c;需要注意一些关键的操作注意点&#xff0c;以确保获得高质量的显微图像和保护仪器的正常运行。以下是一些常见的扫描电子显微镜操作注意点&a…

STM32与Freertos入门(四)任务调度的介绍

简介&#xff1a; FreeRTOS支持的任务调度方法有抢占式、协作式、时间片轮转&#xff0c;下面分别来讲解。 1.抢占式调度 抢占式调度&#xff0c;是最高优先级的任务一旦就绪&#xff0c;总能得到CPU的执行权。 高优先级运行时候&#xff0c;低优先级不运行&#xff0c;等待…

【分治算法】运算的优先级

最典型的回溯算法就是归并排序&#xff0c;核心逻辑如下&#xff1a; public void sort(int[] nums, int lo, int ho){int mid (lo hi) / 2;//对数组的两部分分别排序sort(nums,lo, mid);sort(nums, mid1,hi);//合并两个排好序的子数组merge(nums, lo, mid, hi); }添加括号的…

uniapp 用于开发H5项目展示饼图,使用ucharts 饼图示例

先下载ucharts H5示例源码&#xff1a; uCharts: 高性能跨平台图表库&#xff0c;支持H5、APP、小程序&#xff08;微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序&#xff09;、Vue、Taro等更多支持canvas的框架平台&#…

企业电子招标采购系统源码Spring Cloud + Spring Boot + 前后端分离 + 二次开发

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…

sqlserver dba日常操作

文章目录 查询慢sql的方法sqlserver备份全备差异备日志备ldf备份事务备份 注意事项SQL Server 还原全备还原差异备份还原日志备/尾日志还原事务日志还原备份还原中的问题还原失败&#xff0c;需要某些权限重命名sql Server数据库名称失败 作业迁移单个迁移批量迁移 登陆账号迁移…

【工作流Activiti】流程实例

1、什么是流程实例 流程定义ProcessDefinition和流程实例ProcessInstance是Activiti重要的概念&#xff0c;类似于Java类和Java实例的关系 启动一个流程实例表示开始一次业务流程的运行&#xff0c;比如员工请假流程部署完成&#xff0c;如果张三要请假就可以启动一个流程实例…

PHP-PhpSpreadsheet导出带图片方法

需求描述 导出表格&#xff0c;项目名称对应项目详情页面二维码。 实现方法 1&#xff0c;先将各个项目生成的二维码存放到了一个指定目录里面&#xff1b; 2&#xff0c;导出数据到excel表格 <?phpuse PhpOffice\PhpSpreadsheet\Spreadsheet; use PhpOffice\PhpSpread…

Linux Centos 配置 Docker 国内镜像加速

在使用 Docker 进行容器化部署时&#xff0c;由于国外的 Docker 镜像源速度较慢&#xff0c;我们可以配置 Docker 使用国内的镜像加速器&#xff0c;以提高下载和部署的效率。本文将介绍如何在 CentOS 系统上配置 Docker 使用国内镜像加速。 步骤一&#xff1a;安装 Docker 首…

ubuntu16.04升级到ubuntu18.04

当您执行 sudo do-release-upgrade 但收到 “No new release found” 的消息时&#xff0c;这通常意味着系统没有检测到可用的升级。对于 Ubuntu 16.04 LTS 到 Ubuntu 18.04 LTS 的升级&#xff0c;您可能需要考虑以下几点&#xff1a; 1. 确保所有软件包都是最新的 再次运行…

视频推拉流EasyDSS互联网直播/点播平台构建户外无人机航拍直播解决方案

一、背景分析 近几年&#xff0c;国内无人机市场随着航拍等业务走进大众&#xff0c;出现爆发式增长。无人机除了在民用方面的应用越来越多&#xff0c;在其他领域也已经开始广泛应用&#xff0c;比如公共安全、应急搜救、农林、环保、交通 、通信、气象、影视航拍等。无人机使…

【C盘清理】Jetbrains全家桶(PyCharm、Clion……)更改 IDE 特定文件(配置、缓存、插件、日志等)存储位置

文章目录 一、官网说明二、更改 IDE 目录的位置1. 转到“帮助”|“编辑自定义属性”2. 各文件位置3. 以PyCharm系统目录为例4. 修改idea.properties 三、清理旧的 IDE 目录 一、官网说明 IDE 使用的目录官网说明 二、更改 IDE 目录的位置 默认情况下&#xff0c;PyCharm 将每…

硬件基础-二极管

3.二极管 正偏时是多数载流子载流导电&#xff0c;反偏时是少数载流子载流导电。所以&#xff0c;正偏电流大&#xff0c;反偏电流小&#xff0c;PN 结显示出单向电性。多数载流子正向通过 PN 结时就需要克服内电场的作用&#xff0c;需要约 0.7 伏的外加电压&#xff0c;这是…