微信小程序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之Ajax运用 学习运用篇
Sep 26 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
vue子路由跳转实现tab选项卡
Jul 24 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加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php自定义apk安装包实例
2014/10/20 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
django中forms组件的使用与注意
2019/07/08 Python
Python命令行click参数用法解析
2019/12/19 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python实现猜拳游戏
2020/03/04 Python
python制作微博图片爬取工具
2021/01/16 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
入学申请自荐信范文
2014/02/26 职场文书
擅自离岗检讨书
2014/09/12 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
导游词格式
2015/02/13 职场文书
领导欢送会主持词
2015/07/06 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记