How to solve WeChat Mini Programs's problem of slow loading of high-definition pictures in rotated pictures

topic description

in the development of WeChat Mini Programs, we will inevitably encounter the need to render large high-definition images, but the loading is very slow, and there will be the effect of the printer coming out line by line, so the experience is not very good.
I have added CDN to static resources, but the first load will still be slow

sources of topics and their own ideas

I have thought of several options:
1. Listen to the picture loading event, and display the whole picture only after loading, but only after using it can you find that the picture load event does not guarantee that the picture is completely loaded before triggering, so the effect is not obvious
2. Replace the original picture with the skeleton first, but there is still no way to accurately monitor when the picture can be fully displayed

I hope to guide big projects or bosses with similar experience. I think this is also a problem of performance optimization.
I am still an individual developer, and there are many small projects I develop, so I basically don"t understand
about some performance optimization problems of large projects. Therefore, I would like to take this opportunity to learn the knowledge of front-end performance optimization. Please guide me

.
WeChat Mini Programs
May.23,2022

Ali Yun compressed pictures, the image path adds? XMOS _ music _ processing imageCompact resize

compressed images.
who has nothing to do? enlarge your banner.

two pictures, one high-definition version, one low-quality version, the page loads low-quality version, js listens for high-definition version of onload events, loading is complete, replace images 

// 
// maplazySrc = index < 2 ? src : null
// wxmlimagesrclazySrc
// SwiperonChangecurrent-1+1,srclazySrc

Previous: What is the way Vue + js-xlsx exports pictures?

Next: I would like to ask you, why is the result of the execution of this code 0meme1jin2? Why would clearTimeout erase the last loop?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu