微信小程序image图片加载完成监听

最新推荐文章于 2024-02-08 14:08:30 发布
最新推荐文章于 2024-02-08 14:08:30 发布
阅读量7.2k 收藏 6
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37400682/article/details/83826175
版权

1. 绑定回调

    通过image标签的bindload属性绑定图片加载完成回调函数，src根据图片加载是否完成绑定是否显示缺省图：

<image class="slide-image" bindload="imageLoad" src="../../../images/banner1.jpg" data-id="{{index}}" data-item-key="{{item_key}}">

</image>写博客

 

2. 回调监听

    在js文件中定一个imageLoad函数，我们就可以通过参数拿到图片加载完成宽高信息：

imagesHeight: function (e) {

},

夜黑风高-ysy
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序实现图片预加载组件
11-27
网页中的图片预加载 图片预加载对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。我们知道在 Web 页面中实现图片的预加载其实很简单，通常的做法是在 JS 中使用 Image 对象即可，代码大致如下 var image = new Image() image.onload = function() { console.log('图片加载完成') } image.src = 'http://misc.360buyimg.com/lib/img/e/logo-201305.png' 下面推荐几篇网页中实现图片预加载的
微信小程序的图片预加载组件
05-10
适用于微信小程序的图片预加载组件，使用步骤如下： 1、将 img-loader 目录拷贝到你的项目中 2、在页面的 WXML 文件中添加以下代码，将组件模板引入 <import src="../../img-loader/img-loader.wxml"/> <template is="img-loader" data="{{ imgLoadList }}"></template> 3、在页面的 JS 文件中引入组件脚本 const ImgLoader = require('../../img-loader/img-loader.js') 4、实例化一个 ImgLoader 对象，将 this(当前 Page 对象) 传入，第二个参数可选，为默认的图片加载完成的回调方法 this.imgLoader = new ImgLoader(this) 5、调用 ImgLoader 实例的 load 方法进行图片加载，第一个参数为图片链接，第二个参数可选，为该张图片加载完成时的回调方法 this.imgLoader.load(imgUrlOriginal,
微信小程序中的onLoad详解及简单实例
最新发布
weixin_42017221的博客
02-08 1437
onLoad是小程序中页面的生命周期函数之一，表示页面加载时会触发该函数，通常用于数据的初始化。
微信小程序wx.getImageInfo()如何获取图片信息
08-28
主要为大家详细介绍了微信小程序wx.getImageInfo()如何获取图片信息，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现图片懒加载的示例代码
08-28
本篇文章主要介绍了微信小程序实现图片懒加载的示例代码，实现的原理是通过页面预加载图片，对用户体验度会有一定的提高，具有一定的参考价值，有兴趣可以了解一下
手把手教你写一个小程序图片懒加载bindload，提示文字页面滚动消失（onPageScroll），停止出现（附源码），滑动到底部事件onReachBottom
weixin_44191250的博客
09-09 618
今天接到需求需要在小程序上写个协议加载的页面 需求1.协议分成15张图片加载需要加载动画 2.滑动页面提示文字消失 3.滑动到底部按钮可以点击 wxml部分 <view> <image wx:for="{{imgUrls}}" wx:key="item" src="{{arry[index] ? imgUrls[index].url: ''}}" class=" pic...
小程序/H5 判断多张图片是否加载完成方法
唱歌去旅行8的博客
10-15 1907
getImg() { this.imageReady(imgArr).then(() => { //do something }) } imageReady(pics) { const picsAll = pics.map(imgurl => new Promise((resolve, reject) => { // 小程序判断多张图片是否加载完成方法 wx.getImageInfo({ src: imgurl,
微信小程序 image bindload 事件不触发，图片加载不出来
LlanyW的专栏
01-19 692
前端加载图片url的时候，在后面加一串随机数，这样小程序每次都会认为是新图片，不会从缓存中读取了。这个方法简单，就是会浪费一些性能和流量。其原因就在于，小程序的优化机制，多次加载同一张图片，往往会从缓存中读取，而不是从网络下载，这就导致 bindload 事件不会触发了。图片加载不出来，我图片加载是通过bindload事件不判断是否下载完成再显示。但是现在bindload不触发，一直显示加载层。当小程序图片页面反复跳转时，或者微信打开小程序页面之后，处于后台运行。
微信小程序中高清图片替换加载策略
jiljdlawjdlada的博客
01-11 1151
微信小程序中高清图片替换加载策略前言一、基本思想二、具体步骤1.图片大小对比2.代码流程总结 前言 随着微信的不断发展，微信小程序凭借着它用户基数大，无下载安装等优点开始逐渐替代传统app。但同时，微信小程序也存在着致命的缺点，微信团队为了使微信小程序免除下载安装等复杂操作，就限制微信小程序的上传大小不能超过2M，这使得微信小程序不能将用作封面或者背景的高清图储存在本地，只能通过image标签的jsonp方式去访问网络资源，这种方式的最大弊端就是可能会造成加载过程中白屏显示，极大的影响用户体验，为了解决这
【onload】js判断单张、多张图片加载完成
m0_45382009的博客
11-19 1341
方法一：原生js // 单张图片加载完成 let imgTag = new Image() //创建img标签 imgTag.src = 'https://t7.baidu.com/it/u=1744157654,1808520583&fm=193&f=GIF' imgTag.onload=function(){ console.log('图片加载完成才会执行的回调') } // 多张图片加载完成 let imgList = [ {id:0,src:'https://t7.
微信小程序之预加载图片组件wxapp-img-loader
baked_donut的博客
04-10 1248
1.下载并拷贝img-loader目录到项目中 2.在页面的wxml文件中添加以下代码，将组建模板引入 <import src="../../img-loader/img-loader.wxml"/> <template is="img-loader" data="{{ imgLoadList }}"></template> 3.在页面的js文件中引入组...
2023微信小程序 图片内容安全检测实例总结 security.mediaCheckAsync
xiaoxuedididi的博客
02-21 2000
踩了很多次坑，终于在微信小程序中搞定了图片内容安全检测。最开始看的以前的文章用的是老版本的图片安全检测，在开发者工具中是可以跑通的，但是到了真机调试就无法进行图片检测，后来提了个工单，才知道要用新版本的安全检测——security.mediaCheckAsync。发现以前也看到过这个接口，好像是因为是异步的传输结果，而且还是30分钟内给出结果，于是就放弃了，结果选了个老版本。
微信卡片流图片懒加载(监听所有图片)
梁雨季™的博客
08-21 416
图片懒加载 <imagesrc='{{item.img}}'class='banner'lazy-load="true"mode="aspectFill"/> 图片加了lazy-load 属性，就有主流lazyload的那种加载过程了 查看文档，image组件在 page 与 scroll-view 下，均会生效。为什么看起来像是没有生效？ lazy-load实际实现的功能：小程序的lazy-load不是通常认为的不在当前情况下展示的image标签不加载， 而是小程序提...
小程序使用Image对象预加载图片·获取图片信息
slongzhang的博客
05-12 1921
微信和支付宝等小程序目前都没有直接调用Image的接口, 但可以借用canvas曲线救国，在页面设置个不可见的canvas,再通过canvas的接口能力就能调用到image了。
微信小程序「渲染层网络层错误」解决方法
枫落曳
04-25 4207
解决方案：利用bindload判断图片加载完毕，修改状态显示图片 wxml： <view wx:for="{{flash}}"> <image src="{{item.loadReady ? item.img : '默认图'}}" bindload="imageLoadReady" data-index="{{index}}" data-key="flash"></image> </view> js： //图片加载 imageLoadRea
js判断图片是否加载完成
博哥的二进制世界
05-08 3163
js判断图片是否加载完成
微信小程序image资源太大，怎样懒加载
05-12
懒加载是一种常用的优化网页性能的方式。对于微信小程序的图片资源，也可以采用懒加载的方式来优化加载速度。 下面是一种实现方式： 1. 在 wxml 中，将需要懒加载的图片的 src 属性设置为一个占位符，比如： ```html <image src="{{imageUrl}}" data-src="{{lazyLoadUrl}}" /> ``` 2. 在 js 中，监听页面滚动事件，当图片进入可视区域时，将占位符替换为真实的图片链接，如下： ```javascript Page({ data: { imageUrl: '占位符链接', lazyLoadUrl: '真实图片链接' }, onReady: function() { var that = this; wx.createSelectorQuery().select('.image').boundingClientRect(function(rect) { if (rect.top < wx.getSystemInfoSync().windowHeight) { that.setData({ imageUrl: that.data.lazyLoadUrl }); } }).exec(); }, onPageScroll: function(e) { var that = this; wx.createSelectorQuery().select('.image').boundingClientRect(function(rect) { if (rect.top < wx.getSystemInfoSync().windowHeight) { that.setData({ imageUrl: that.data.lazyLoadUrl }); } }).exec(); } }) ``` 在上面的代码中，使用了 `wx.createSelectorQuery()` 获取到了图片元素的位置信息，并根据图片元素是否进入了可视区域，来判断是否需要进行懒加载。 注意：在实际使用过程中，需要根据具体情况进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值