Home Website Source Code Mini program source code Image preloading component for WeChat applet

Image preloading component for WeChat applet

The image preloading component suitable for WeChat mini programs has been applied to the JD shopping mini program version. The usage steps are as follows:

1. Copy the img-loader directory to your project

2. Add the following code to the WXML file of the page to introduce the component template

<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>
3. Introduce component scripts into the JS file of the page

const ImgLoader = require('../../img-loader/img-loader.js')
4. Instantiate an ImgLoader object and pass in this (current Page object). The second parameter is optional and is the default callback method for image loading completion

this.imgLoader = new ImgLoader(this)
5. Call the load method of the ImgLoader instance to load the image. The first parameter is the image link, and the second parameter is optional and is the callback method when the image is loaded

this.imgLoader.load(imgUrlOriginal, (err, data) => {
console.log('Image loading completed', err, data.src, data.width, data.height)
})
Note: The first parameter of the callback method when the image loading is completed is the error message (null if the loading is successful), and the second parameter is the image information (Object type, including src, width and height).
Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn

Related Article

How to use the image component to display pictures in WeChat applet How to use the image component to display pictures in WeChat applet

09 May 2018

This article mainly introduces the method of using the image component to display pictures in the WeChat applet. It briefly analyzes the related usage skills of the image component attached to the WeChat applet in the form of examples. It also comes with source code for readers to download and refer to. Friends who need it can refer to it. I hope it can help. to everyone.

Introduction to the use of the image preloading component wxapp-img-loader in WeChat applet Introduction to the use of the image preloading component wxapp-img-loader in WeChat applet

18 Oct 2018

This article brings you an introduction to the use of the image preloading component wxapp-img-loader in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.​

Detailed explanation of WeChat applet Image component example Detailed explanation of WeChat applet Image component example

20 Feb 2017

This article mainly introduces relevant information about detailed examples of the Image component of the WeChat applet. Friends in need can refer to it.

Mini Program Simple PHP multi-image upload mini program code Mini Program Simple PHP multi-image upload mini program code

29 Jul 2016

Mini program: Mini program is a simple PHP multi-image upload mini program code: first upload the source code, you can copy it to your own computer to run ~ Copy the code as follows: <html> <meta http-equiv="Content-Type" c method="post" enctype="multipart/form-data"> <input type="file" name="img[]" /><br /> <input type

Implementation of calendar sign-in applet Implementation of calendar sign-in applet

26 Jan 2021

Mini program development tutorial: This article shares with you the ideas and source code for implementing a calendar mini program. It has certain reference value and I hope it can be helpful to everyone.

WeChat applet implements image component picture adaptive width ratio example sharing WeChat applet implements image component picture adaptive width ratio example sharing

17 Jan 2018

This article mainly introduces the method of WeChat applet to realize the adaptive width ratio display of the image component, briefly describes the common attributes of the image component, and analyzes the relevant operation skills of WeChat applet to realize the adaptive width ratio of pictures in the form of examples. It needs Friends can refer to it, I hope it can help everyone.

Detailed explanation of the steps to set up Gitee applet Detailed explanation of the steps to set up Gitee applet

31 Mar 2023

Gitee is a very good open source platform that not only supports code hosting, but also has many functions such as Wiki, blog, email, CI/CD, etc. For mini program developers, Gitee also provides mini program settings. Today we will explain in detail the steps to set up the Gitee applet. ## Step one: Create a new mini program. First, we need to create a new mini program on Gitee. Open the Gitee homepage, click "New Warehouse", and select "Mini Program" in "Warehouse Type": ![New Mini Program](https://img

Where can I find the php source code? Where can I find the php source code?

06 Nov 2019

PHP source code can be downloaded from the PHP Chinese website download site, including back-end templates, mini program source codes, Discuz templates, wordpress templates, phpcms template source codes, etc.

How to publish a mini program? How to publish a mini program?

03 Jun 2020

Mini program publishing method: first purchase a server and configure the production environment of the mini program; then put the back-end source code on the server to run; then purchase a domain name and manage it with the back-end server address; finally publish and submit for review in the mini program management background That’s it.

See all articles See all articles

Hot Tools

WeChat mini program demo: imitation mall

WeChat mini program demo: imitation mall

WeChat mini program demo: imitating a mall, easy to get started, and has a good introduction to some basic functions of the mall

Takeaway: Implement anchor-like functionality

Takeaway: Implement anchor-like functionality

It is the similar anchor function that everyone needs. In addition, it also implements the typical ordering functions of some takeout apps. It is recommended to study and study;

WeChat mini program demo: Lezhu

WeChat mini program demo: Lezhu

WeChat mini program demo: Lezhu: similar to location-based; helpful application, somewhat similar to the spirit of Zhang Xiaolong’s mini program.

WeChat mini program game demo selects different color blocks

WeChat mini program game demo selects different color blocks

WeChat mini program game demo selects different color blocks

WeChat applet demo: carousel image transformation

WeChat applet demo: carousel image transformation

Carousel chart style change, a simple carousel chart implemented with a small program, easy to write