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

2024-03-22 10:53:04

需求

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

实现

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

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

微信小程序图片加载（本地，网路）实例详解

在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片加载网络图片加载本地图片 <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image> src="/image/arrowright.png" 这句就是加载本地图片资源的.想想iOS中的加载本地图片,imageName:,类似.
微信小程序image图片加载完成监听

需求在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调. 实现 1. 绑定回调通过image标签的bindload属性绑定图片加载完成回调函数,src根据图片加载是否完成绑定是否显示缺省图: <image src='{{loadComplete?srcImagePath:defaultImagePath}}' bindload="imageLoad"/
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一）

微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一) 页面缓存的设置优化了页面加载,减少了频繁的调取接口,使用户在断网的情况下有更好的体验. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localSt
微信小程序实现自定义加载图标功能

效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方形的宽高以及定位(注意:此处需要将长方形的旋转中心点移动到长方形的右侧边终点,方便后期以该点旋转.): 3.通过长方形盒子的伪元素,设置显示的长方形背景和宽高,同时进行定位. 4.由于在第二步的时候,已经将旋转中心移动,此处我们直接对每一个盒子中长方形进行旋转(注意:旋转角度 = 360 / 盒子中
微信小程序实现滚动加载更多的代码

1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个 4.滚动到底部绑定需要触发的事件 <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='
微信小程序下拉加载和上拉刷新两种实现方法详解

方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里设置window属性设置js里onPullDownRefresh和onReachBottom方法下拉加载说明: 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新. onPullDownRefresh(){ console.log('--------下拉刷新-------') wx.showNavigationBarLoadin
微信小程序动态的加载数据实例代码

微信小程序刚出来有很多的东西还在更新,先写些刚开始要做的工作 1.首先要写在js里定义一个全局变量 data: { datalist: [] }, 2.请求数据加载,获得整个数组信息 wx.request({ url: httpUrl, data: {}, success: function (res) { that.setData({ datalist: res.data.courses }) }, 3.在.wxml中调用数组的调用用:wx:for="{{datalist}}"
微信小程序 loading（加载中提示框）实例

微信小程序加载提示框: loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... </loading> <button bindtap="changeHidden">show/hidden</button> </view> .js Page({ data:{ hidden:true }, changeHidden
微信小程序实现分页加载效果

分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能. 数据来自于后端(lumen带分页) /** * @todo 获取订单列表 * @return mixed */ public function getOrderList(){ $field = ['id','order_no','name','created_at','d
Android基于Glide v4.x的图片加载进度监听

Glide是一款优秀的图片加载框架,简单的配置便可以使用起来,为开发者省下了很多的功夫.不过,它没有提供其加载图片进度的api,对于这样的需求,实现起来还真颇费一番周折. 尝试遇到这个需求,第一反应是网上肯定有人实现过,不妨借鉴一下别人的经验. Glide加载图片实现进度条效果可惜,这个实现是基于3.7版本的,4.0版本以上的glide改动比较大,using函数已经被移除了 using() The using() API was removed in Glide 4 to encourage
微信小程序本地图片按照屏幕尺寸处理

微信小程序本地图片按照屏幕尺寸处理前言: 个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧.微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度,具体步骤如下图. 1.本地图片导入步骤一:选择最左侧的菜单中的项目步骤二:选择打开后将图片直接拷贝到新建的image文件夹下图片导入完成后,项目的整体目录结构如下图所示, 2.按屏幕尺寸自适应图片宽和高步骤一:编写工具函数,返回封装后

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

相关推荐

随机推荐