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

This article mainly introduces WeChat Mini Programs how to achieve picture preloading component related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this WeChat Mini Programs how to achieve picture preloading component article will have a harvest, let's take a look.

Pictures in the web page are preloaded

Image preloading is very beneficial for photo galleries and websites with a large proportion of pictures. It ensures that pictures are released quickly and seamlessly, and helps users get a better user experience when browsing your site's content. We know that preloading images in Web pages is actually very simple. The usual practice is to use the Image object in JS. The code is roughly as follows

Var image = new Image () image.onload = function () {console.log ('picture loaded')} image.src = 'http://misc.360buyimg.com/lib/img/e/logo-201305.png'

The following articles are recommended for image preloading on web pages:

1. Jquery image preloading automatic proportional scaling plug-in

2. There is no need to wait for JS to preload pictures.

3. JQuery can simply realize picture preloading.

However, it is more troublesome to preload pictures in WeChat Mini Programs (hereinafter referred to as Mini Program), because there is no JS object like Image provided in Mini Program.

Mini Program must know it will.

Before you get to the point, you need to know the following about Mini Program (of course, it's best to read the official documentation in its entirety):

The core of Mini Program framework is a responsive data binding system, the whole system is divided into view layer and logic layer, the view layer is the page template (the file with the suffix .wxml), and the logic layer is the page JS file.

Mini Program's page template is composed of a series of basic components, such as view, text, button, etc.

The page content is updated based on the one-way binding of the data. The setData method of the Page object is called by JS to update the bound data in the template.

The communication from the view layer to the logical layer is accomplished through events. The callback of the event is declared in the component, and the JS side can monitor the occurrence of interface interaction, the change of component state, and so on.

In WXML files, templates can be reused through template. If template is defined in different files, it needs to be introduced by import statement first.

Here is a simple official example to help understand

Hello {{name}}! Click me! / / script file foo.jsPage ({data: {name: 'WeChat'}, changeName: function (e) {this.setData ({name:' MINA'})})

Run this page and you will see a line of Hello WeChat! Text and a button, click the button, the text will become Hello MINA!

Load pictures in Mini Program

Mini Program provides an image component (similar to the img tag in HTML), which can set src and load callbacks for success or failure. It is easy to use.

/ / script file bar.jsPage ({imageOnLoad (ev) {console.log (`Picture loaded successfully, width: ${ev.detail.width}; height: ${ev.detail.height} `)}, imageOnLoadError () {console.log ('picture loading failed')})

Run the above code, and if it goes well, a picture will be displayed on the page, and the console will print the log information with the width and height of the picture.

Extract functions into common components

Next, we consider implementing such a function, loading a picture with a large size and K number on the page, because the picture is very large, it takes a certain amount of time to download, and during this time, the user sees a blank or incomplete picture. The experience is obviously not good.

A commonly used optimization method is to load a thumbnail first, which is set to the same width and height as the original image by style, so that users can quickly see a blurred image first, and then preload the original image. After loading, the thumbnail is replaced. Because the picture has already been downloaded, the interface can seamlessly switch to the original image display. The effect is as follows:

Preload a single picture

The key to completing this optimization operation is the need for the support of a common image preloading component. Next, let's take a look at how to implement it step by step.

Create a new demo page and component-related files img-loader.js and img-loader.wxml, and the component needs to have a template file like the page, because the template structure cannot be dynamically inserted in Mini Program. Then reference the component template through the import statement in demo.wxml, and introduce the component script through the require statement in demo.js

In the page, we call the component template through template and pass in the data. Here we pass an array of pictures called imgLoadList.

Initialize the component in the onLoad method in the page script and pass in the this object, because the content in the template must be updated through the setData of the Page object within the component

Define a load method in the component's img-loader.js to create a load of a picture, add the incoming src to the load queue, and use the setData method to update the queue data

Next, through the picture queue data received in the component img-loader.wxml, the wx:for instruction is used to generate the image component to load the picture. At the same time, the successful and failed callbacks are bound to the methods in img-loader.js, and finally back to the Page object.

As you can see, because the template structure cannot be dynamically inserted in Mini Program, compared with the component call on the ordinary web side, there is an extra step of introducing and using the template in the WXML file, while the other parts are similar to the caller (that is, the Demo page). Here is the code for the complete Demo page.

Click To Load Image {{msg}} / /-demo.js-/ / introduces the picture preloading component const ImgLoader = require ('.. /.. / img-loader/img-loader.js') / / thumbnail 80x50 3KBconst imgUrlThumbnail = 'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg'// original image 3200x2000 1.6MBconst imgUrlOriginal =' http://storage.360buyimg.com/mtd/home/lion1483624894660.jpg'Page({ data: {msg:'' ImgUrl:''}, onLoad () {/ / initialize picture preload component this.imgLoader = new ImgLoader (this)}, loadImage () {/ / load thumbnail this.setData ({msg: 'big image is desperately loading.., imgUrl: imgUrlThumbnail}) / / preload the original image at the same time Replace this.imgLoader.load after loading successfully (imgUrlOriginal, (err, data) = > {console.log ('image loading complete', err, data.src) this.setData ({msg: 'big image loading completed ~'}) if (! err) this.setData ({imgUrl: data.src})})

If the callback after image loading is specified as the method in the Page object, you can easily handle the loading of multiple images. An example is also written here, and the effect is as follows:

This is the end of the article on "how to realize the picture preloading component for WeChat Mini Programs". Thank you for reading! I believe you all have a certain understanding of "how to realize the picture preloading module by WeChat Mini Programs". If you want to learn more, you are welcome to follow the industry information channel.

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.