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


Posted in Javascript onAugust 31, 2019

需求

在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。

实现

1. 绑定回调

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

<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad"/>

2. 回调监听

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

imgOnLoad(ev) {
  let src = ev.currentTarget.dataset.src,
   width = ev.detail.width,
   height = ev.detail.height
 }

3. 缩放图片

我们写一个工具类,然后调用imageUtil方法对原始图片根据屏幕宽高进行等比例缩放。

function imageUtil(e) {
 var imageSize = {};
 var originalWidth = e.detail.width;//图片原始宽 
 var originalHeight = e.detail.height;//图片原始高 
 var originalScale = originalHeight / originalWidth;//图片高宽比 
 console.log('originalWidth: ' + originalWidth)
 console.log('originalHeight: ' + originalHeight)
 imageSize.imageWidth = originalWidth;
 imageSize.imageHeight = originalHeight;
 //获取屏幕宽高 
 wx.getSystemInfo({
  success: function (res) {
   var windowWidth = res.windowWidth;
   var windowHeight = res.windowHeight;
   var windowscale = windowHeight / windowWidth;//屏幕高宽比 
   if (originalScale < windowscale) {//图片高宽比小于屏幕高宽比 
    //图片缩放后的宽为屏幕宽 
    imageSize.imageWidth = windowWidth;
    imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
   } else {//图片高宽比大于屏幕高宽比 
    //图片缩放后的高为屏幕高 
    imageSize.imageHeight = windowHeight;
    imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
   }
   imageSize.imageWidth = windowWidth;
   imageSize.imageHeight = windowHeight;
  }
 })
 console.log('缩放后的宽: ' + imageSize.imageWidth)
 console.log('缩放后的高: ' + imageSize.imageHeight)
 return imageSize;
}

4. 修改image宽高

通过imageUtil获取到目标宽高后,this.setData({width:imageUtil(e).width, height:imageUtil(e).height}) 即可以动态修改图片宽高了(e是imageLoad方法中的参数):

<image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad" style='width:width;height:height'/>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
JavaScript前端面试组合函数
Jun 21 Javascript
JS实现使用POST方式发送请求
Aug 30 #Javascript
node.js处理前端提交的GET请求
Aug 30 #Javascript
Node.js系列之连接DB的方法(3)
Aug 30 #Javascript
Node.js系列之发起get/post请求(2)
Aug 30 #Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 #Javascript
微信小程序实现写入读取缓存详解
Aug 30 #Javascript
VUE 自定义组件模板的方法详解
Aug 30 #Javascript
You might like
php 执行系统命令的方法
2009/07/07 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
详解vuex的简单使用
2018/03/12 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
开工典礼策划方案
2014/05/23 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
演讲开场白和结束语
2015/05/29 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js