php - How to make website carousel images load quickly
给我你的怀抱2017-05-16 12:59:36
0
4
655
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
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:
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...
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can use preloading, it will be loaded when you just visit
If possible, use webp or tinyPNG for pictures;
Size to match the actual size of the carousel component, or create another thumbnail;
CDN；
http/1.x upgraded to http/2;
Cache to localStorage, the format is base64, set an expiration reload mechanism;
...
I’ll add more when I think of it
Simple, fast and threshold-free method:
Configure gzip compression on the server yourself
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:
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...
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
Follow The Walking Dead The Walking Dead