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

.
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
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c24ee0-48774.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c24ee0-48774.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?