Image preloading component for WeChat applet
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).
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
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.
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.
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.
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
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.
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.
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
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.
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.
Hot Tools
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
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: 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 applet demo: carousel image transformation
Carousel chart style change, a simple carousel chart implemented with a small program, easy to write