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

 更新时间:2019年08月31日 09:07:04   作者:T丶快乐知己丬  
这篇文章主要为大家详细介绍了微信小程序image图片加载完成监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

需求

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

实现

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'/>

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

相关文章

  • JS正则表达式学习之贪婪和非贪婪模式实例总结

    JS正则表达式学习之贪婪和非贪婪模式实例总结

    这篇文章主要介绍了JS正则表达式学习之贪婪和非贪婪模式用法,结合实例形式总结分析了JS正则表达式中贪婪模式与非贪婪模式的具体功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • BootStrap select2 动态改变值的方法

    BootStrap select2 动态改变值的方法

    这篇文章主要介绍了BootStrap select2 动态改变值的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • js生成缩略图后上传并利用canvas重绘

    js生成缩略图后上传并利用canvas重绘

    这篇文章主要介绍了js生成缩略图后上传,利用canvas重绘,需要的朋友可以参考下
    2014-05-05
  • JS中给数组去重的方法小结

    JS中给数组去重的方法小结

    给一个存放数字或字符串的数组去重很简单,那么现在问题升级,如何一个数组a里面存放的元素是若干个数组,那么如何给这个数组a去重?本文给大家介绍了JS中给数组去重的方法小结,需要的朋友可以参考下
    2024-08-08
  • NodeJs中的非阻塞方法介绍

    NodeJs中的非阻塞方法介绍

    NodeJs中的非阻塞方法介绍,需要的朋友可以参考下
    2012-06-06
  • 改变隐藏的input中value值的方法

    改变隐藏的input中value值的方法

    这篇文章主要介绍了改变隐藏的input中value值的方法,需要的朋友可以参考下
    2014-03-03
  • 如何利用ES6进行Promise封装总结

    如何利用ES6进行Promise封装总结

    这篇文章主要介绍了如何利用ES6进行Promise封装总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • javascript实现日期时间动态显示示例代码

    javascript实现日期时间动态显示示例代码

    这篇文章主要介绍了javascript实现日期时间动态显示示例代码,页面动态显示时间变化的方法有很多,本文为大家介绍下使用javascript的具体实现,感兴趣的朋友可以参考一下
    2015-09-09
  • JavaScript在浏览器中的执行机制

    JavaScript在浏览器中的执行机制

    既然说到了JavaScript,那么就会绕不过去执行上下文,只有理解了执行上下文才能更好的理解JavaScript本身,不过本部分不是专门讲解 JavaScript的,主要从JavaScript的执行顺序开始介绍一下JavaScript是怎样运行的
    2023-09-09
  • 用JS实现HTML标签替换效果

    用JS实现HTML标签替换效果

    用JS实现HTML标签替换效果...
    2007-06-06

最新评论