php - Comment charger rapidement les images du carrousel d'un site Web
给我你的怀抱2017-05-16 12:59:36
0
4
673
Entrez dans la page d'accueil. Les 6 images du carrousel sur la page d'accueil sont chargées à partir de l'adresse lue dans la base de données. Le chargement est long à l'ouverture. Existe-t-il un moyen d'éliminer le chargement paresseux ? >
Configurez vous-même la compression gzip sur le serveur
Dépensez de l'argent pour obtenir un petit stockage de fichiers + CDN à servir ensemble, comme Qiniu, OSS, Youpai...
Plus compliqué, un peu seuil, et cela dépend si cela convient au scénario d'application spécifique :
Envisagez d'utiliser l'effet de chargement paresseux similaire de Zhihu, mais il est bien meilleur que l'expérience de chargement paresseux traditionnelle, pleine de style, divisez la taille de l'image selon la logique (ou utilisez l'API du service cdn pour modifier les paramètres) , le chargement par défaut est une petite image, puis chargez la grande image avec des effets de transition.
Veuillez consulter ce lien pour l'effet : https://zhuanlan.zhihu.com/p/... Petite photo : https://pic2.zhimg.com/v2-bf1... Grande photo : https : // pic2.zhimg.com/v2-bf1...
Considérez les nouveaux formats d'image, tels que le webp de Google. La compression avec perte est estimée à environ 30 % plus petite que le jpg, et la compression sans perte est estimée à environ 60 % plus petite que le jpg. Il existe également le dernier format TPG développé par Tencent. , que j'ai présenté ces deux derniers jours. Voler partout dans le ciel
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez utiliser le préchargement, il sera chargé lors de votre visite
Si possible, utilisez webp ou tinyPNG pour les photos ;
Taille pour correspondre à la taille réelle du composant du carrousel, ou créer une autre vignette
CDN；
http/1.x mis à niveau vers http/2 ;
Cache vers localStorage, le format est base64, définit un mécanisme de rechargement d'expiration
...
J'en ajouterai plus quand j'y penserai
Méthode simple, rapide et sans seuil :
Configurez vous-même la compression gzip sur le serveur
Dépensez de l'argent pour obtenir un petit stockage de fichiers + CDN à servir ensemble, comme Qiniu, OSS, Youpai...
Plus compliqué, un peu seuil, et cela dépend si cela convient au scénario d'application spécifique :
Envisagez d'utiliser l'effet de chargement paresseux similaire de Zhihu, mais il est bien meilleur que l'expérience de chargement paresseux traditionnelle, pleine de style, divisez la taille de l'image selon la logique (ou utilisez l'API du service cdn pour modifier les paramètres) , le chargement par défaut est une petite image, puis chargez la grande image avec des effets de transition.
Veuillez consulter ce lien pour l'effet : https://zhuanlan.zhihu.com/p/...
Petite photo : https://pic2.zhimg.com/v2-bf1...
Grande photo : https : // pic2.zhimg.com/v2-bf1...
.Considérez les nouveaux formats d'image, tels que le webp de Google. La compression avec perte est estimée à environ 30 % plus petite que le jpg, et la compression sans perte est estimée à environ 60 % plus petite que le jpg. Il existe également le dernier format TPG développé par Tencent. , que j'ai présenté ces deux derniers jours. Voler partout dans le ciel
Suivez The Walking Dead The Walking Dead