微信小程序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 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
Ajax常用封装库——Axios的使用
May 08 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
用户注册常用javascript代码
2009/08/29 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Django实现文件上传和下载功能
2019/10/06 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
国外平面设计第一市场:99designs
2016/10/25 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
晚会主持词开场白
2014/03/17 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
催款函怎么写
2015/06/24 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
JavaScript实现两个数组的交集
2022/03/25 Javascript
分享几个简单MySQL优化小妙招
2022/03/31 MySQL