Shulou(Shulou.com)05/31 Report--

This article mainly explains "the method of loading image and completing monitoring in Weixin Mini Programs." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn the method of "image loading and monitoring in Weixin Mini Programs"!

demand

In many cases, the pictures displayed in the application do not meet the business requirements. We need to dynamically zoom according to the width and height of the picture or load the default picture displayed in the application. This is the callback that I don't need to listen to the picture loading completion. Let's see how Weixin Mini Programs (Mini) implement the picture loading completion callback.

achieve

1. Binding Callbacks

Binding the image loading completion callback function through the bindload attribute of the image tag, src Whether the image loading is completed or not, whether the binding is displayed by default:

2. callback listening

Set an imageLoad function in the js file, we can get the image loading completion width and height information through the parameters:

imgOnLoad(ev) { let src = ev.currentTarget.dataset.src, width = ev.detail.width, height = ev.detail.height }

3. resize the picture

Let's write a utility class and call the imageUtil method to scale the original image equally to the screen width and height.

function imageUtil(e) { var imageSize = {}; var originalWidth = e.detail.width;//image originalHeight = e.detail.height;//image originalScale = originalHeight / originalWidth;//image aspect ratio console.log ('originalWidth: ' + originalWidth) console.log ('originalHeight:'+ originalHeight) imageSize.imageWidth = originalWidth; imageSize.imageHeight = originalHeight; //Get Screen Width wx.getSystemInfo({ success: function (res) { var windowWidth = res.windowWidth; var windowHeight = res.windowHeight; var windowscale = windowHeight / windowWidth;//aspect ratio if (originalScale < windowscale) {//picture aspect ratio is less than screen aspect ratio //The width of the image after scaling is the screen width imageSize.imageWidth = windowWidth; imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; } else {//Picture aspect ratio greater than screen aspect ratio //The height of the image after zooming is the screen height imageSize.imageHeight = windowHeight; imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; } imageSize.imageWidth = windowWidth; imageSize.imageHeight = windowHeight; } }) console.log ('scaled width: ' + imageSize.imageWidth) console.log ('scaled height: ' + imageSize.imageHeight) return imageSize;}

4. Modify image width and height

After obtaining the width and height of the target through imageUtil, this.setData({width:imageUtil(e).width, height:imageUtil(e).height}) can dynamically modify the width and height of the image (e is a parameter in the imageLoad method):

At this point, I believe that you have a deeper understanding of "the method of image loading and monitoring in Weixin Mini Programs (Mini)," so you might as well do it in practice! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.