微信小程序 image bindload 事件不触发,图片加载不出来

问题:

当小程序图片页面反复跳转时,或者微信打开小程序页面之后,处于后台运行。

图片加载不出来,我图片加载是通过bindload事件不判断是否下载完成再显示。但是现在bindload不触发,一直显示加载层。

分析:

其原因就在于,小程序的优化机制,多次加载同一张图片,往往会从缓存中读取,而不是从网络下载,这就导致 bindload 事件不会触发了。

 

解决:

 前端加载图片url的时候,在后面加一串随机数,这样小程序每次都会认为是新图片,不会从缓存中读取了。这个方法简单,就是会浪费一些性能和流量。

.wxml 

 <view class="item-left"><image src="/images/mall/loading.gif" class="loading-img" hidden="{{imgShow}}"></image><image fade-in mode="aspectFill" show-menu-by-longpress src="{{imgsrc}}" class="product-img br16"hidden="{{!imgShow}}" lazy-load data-imgsrc="{{imgsrc}}"data-index="{{itemIndex}}" bindload="handlePictureLoadEvent"></image></view>

.js 

 imgsrc =`${imgsrc}?t=${Math.random()}`//防止触发图片load事件失败

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

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

相关文章

鸿蒙 HarmonyOS ArkTS ArkUI 动画 中心扩展、向下扩展、纵向扩展

EntryComponentstruct Index {State widthA: number 0State heightA: number 0onPageShow():void{animateTo ( {duration: 2000,iterations: -1,curve:Curve.Linear}, () > {this.widthA 200this.heightA 200} )}build() {Column() {// 中心扩展Column(){}.width(this.wi…

什么是中间件?

文章目录 为什么需要中间件&#xff1f;中间件生态漫谈数据库中间件读写分离分库分表引进数据库中间件MyCat 服务端代理模式ShardingJDBC 客户端代理模式 总结 IT 系统从单体应用逐渐向分布式架构演变&#xff0c;高并发、高可用、高性能、分布式等话题变得异常火热&#xff0c…

【Arduino】无法上传程序到开发板,报错 avrdude: ser_open(): can‘t set com-state for “\\.\COM6“

问题描述 在尝试将项目上传到Arduino板子时&#xff0c;尽管开发板已被正确连接&#xff0c;并且IDE中能够正常读取到开发板信息&#xff0c;但是上传过程中仍然出现了问题。 下面是IDE中显示的开发板信息&#xff1a; 当尝试上传程序时&#xff0c;控制台报错信息如下&#…

APP测试基本流程以及APP测试要点梳理,保证您看了不后悔!

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

拓展边界:前端世界的跨域挑战

目录 什么是跨域 概念 同源策略及限制内容 常见跨域场景 如何解决跨域 CORS Nginx代理跨域 Node中间件代理跨域 WebSocket postMessage JSONP 其他 什么是跨域 概念 在此之前&#xff0c;我们了解一下一个域名地址的组成&#xff1a; 跨域指的是在网络安全中&…

项目实战————苍穹外卖(DAY11)

苍穹外卖-day11 课程内容 Apache ECharts 营业额统计 用户统计 订单统计 销量排名Top10 功能实现&#xff1a;数据统计 数据统计效果图&#xff1a; 1. Apache ECharts 1.1 介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库&#xff0c;提供直观&#x…

基于SpringBoot Vue养老院管理

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…

Gradle——基础

1、Gradle基础 1.1、Ant/Maven/Gradle对比 无论那种项目构建工具&#xff0c;都有自身的优势和劣势&#xff0c;所以选择一款最适合项目的就是最好的&#xff01; 1.2、Gradle项目目录结构 Gradle项目默认目录结构和Maven项目的目录结构一致&#xff0c;都是基于约定大于配置…

各种Linux版本安装Docker

文章目录 一、Ubuntu 20.04.61. 网卡和DNS配置2. Docker安装 二、CentOS Linux 7.91. 网卡和DNS配置2. Docker安装 三、Alibaba Cloud Linux 31. DNS配置2. repo说明3. Docker安装 四、验证是否安装成功 一、Ubuntu 20.04.6 1. 网卡和DNS配置 /etc/netplan 找到 *.yaml 文件 …

第十一站:C++面向对象-多态

为什么要使用多态 当定义的子类继承父类并重写父类的方法后, 父类使用指针调用子类的同名方法,得到的却是父类同名方法的结果 #include <iostream> using namespace std; class Father { public:void play() {cout << "一起去KTV唱歌吧" << end…

主板电路学习; 华硕ASUS A43S笔记本安装win7X64(ventoy)

记录 老爷机 白色 华硕 A43S 笔记本 安装 win7X64 1. MBR样式常规安装win7X64Sp1 (华硕 A43S 安装 win7X64 ) 老爷机 白色 华硕 A43S 笔记本 安装 win7X64 &#xff08;常规安装&#xff09; 设置&#xff1a; 禁用UEFI 启用AHCI ventoy制作MBR&#xff08;非UEFI&#xff…

OpenAI的DALL·e2生成的AI图像有时会带有偏见或NSFW

专家警告说&#xff0c;OpenAI的图像生成模型DALLe2可能玩起来很有趣&#xff0c;但它生成的图片可能会带有刻板印象和偏见&#xff0c;甚至是生成NSFW图片&#xff0c;因此在现实世界中部署会有风险。 OpenAI公司承认“如果没有足够的防护措施&#xff0c;像DALLe2这样的模型…

【Linux 内核源码分析】堆内存管理

堆 堆是一种动态分配内存的数据结构&#xff0c;用于存储和管理动态分配的对象。它是一块连续的内存空间&#xff0c;用于存储程序运行时动态申请的内存。 堆可以被看作是一个由各个内存块组成的堆栈&#xff0c;其中每个内存块都有一个地址指针&#xff0c;指向下一个内存块…

Wpf 使用 Prism 实战开发Day13

配置 AutoMapper 关系映射 在上一节 ToDoController 控制器&#xff0c;或 IToDoService 服务接口中&#xff0c;方法的传参都是直接传的实体类。但在实际开发过程中&#xff0c;这样是不允许的。标准且规范的做法是&#xff0c;定义一个数据传输层&#xff0c;即Dto层。 一.在…

51单片机矩阵键盘

矩阵键盘 矩阵键盘是一种常用于电子设备中的输入设备&#xff0c;其原理是利用行和列的交叉点来识别按键输入。矩阵键盘通常由多个按键排列成行和列的形式组成&#xff0c;通过按下某个按键可以在对应的行和列交叉点上产生电路连接。 在矩阵键盘中&#xff0c;每个按键都被安排…

【Linux】常见指令解析下

目录 前言1. cp指令&#xff08;重要&#xff09;2. mv指令 &#xff08;重要&#xff09;3. cat指令4. more指令5. less指令 &#xff08;重要&#xff09;6. head指令7. tail指令8. 时间相关的指令8.1 data显示8.2 时间戳 9. cal指令10. find指令&#xff08;非常重要&#x…

每日一练【最大连续1的个数】

一、题目描述 给定一个二进制数组 nums 和一个整数 k&#xff0c;如果可以翻转最多 k 个 0 &#xff0c;则返回 数组中连续 1 的最大个数 。 二、题目解析 本题同样是利用滑动窗口的解法。 首先进入窗口&#xff0c;如果是1&#xff0c;就直接让right&#xff0c;但是如果是…

会话跟踪技术(cookiesession)

文章目录 1、什么是会话跟踪技术2、Cookie2.1、Cookie基本使用2.2、Cookie原理2.3、Cookie使用细节 3、Session3.1、Session基本使用3.2、Session原理3.3、Session使用细节 4、Cookie和Session的对比 1、什么是会话跟踪技术 会话 ​ 用户打开浏览器&#xff0c;访问web服务器的…

2024美赛数学建模思路 - 案例:感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…

cs231n assignment1——SVM

整体思路 加载CIFAR-10数据集并展示部分数据数据图像归一化&#xff0c;减去均值&#xff08;也可以再除以方差&#xff09;svm_loss_naive和svm_loss_vectorized计算hinge损失&#xff0c;用拉格朗日法列hinge损失函数利用随机梯度下降法优化SVM在训练集和验证集计算准确率&a…