php - How to make website carousel images load quickly

Question

Enter the homepage. The 6 carousel images on the homepage are loaded from the address read from the database. It takes a long time to load when opening. Is there any way to eliminate lazy loading? The images have been compressed

Answer 1

You can use preloading, it will be loaded when you just visit

Answer 2

1. If possible, use webp or tinyPNG for pictures;

2. Size to match the actual size of the carousel component, or create another thumbnail;

3. CDN；

4. http/1.x upgraded to http/2;

5. Cache to localStorage, the format is base64, set an expiration reload mechanism;
   ...

I’ll add more when I think of it

Answer 3

Simple, fast and threshold-free method:

1. Configure gzip compression on the server yourself

2. Spend some money to get a small file storage + CDN to serve together, such as Qiniu, OSS, Youpai...

More complicated, a bit threshold, and it depends on whether it is suitable for the specific application scenario:

1. Consider using Zhihu’s similar lazy loading effect, but it is much better than the traditional lazy loading experience, full of style, split the size of the image according to logic (or use the api of the cdn service to change the parameters), the default loading is small image, and then load the large image with the transition effect.

Please see this link for the effect: https://zhuanlan.zhihu.com/p/...
Small picture: https://pic2.zhimg.com/v2-bf1...
Large picture: https:// pic2.zhimg.com/v2-bf1...

1. Consider new image formats, such as Google's webp. Lossy compression is estimated to be about 30% smaller than jpg, and lossless compression is estimated to be about 60% smaller than jpg. There is also Tencent's latest self-developed format TPG, which I have introduced in the past two days. Flying all over the sky

Answer 4

Follow The Walking Dead The Walking Dead