微信小程序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 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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概述.
2006/10/09 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python编程入门的一些基本知识
2015/05/13 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python实现滑雪游戏
2020/02/22 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
Java程序员综合测试题
2014/04/25 面试题
总经理文秘岗位职责
2014/02/03 职场文书
采购求职信
2014/03/17 职场文书
旅游文化节策划方案
2014/06/06 职场文书
毕业生评语大全
2015/01/04 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL