Front-end - Comment accélérer la vitesse de chargement des images d'arrière-plan CSS

Question

Dans l'une de mes pages, j'ai utilisé plusieurs paramètres d'arrière-plan CSS comme images. La taille de l'image est probablement de plusieurs dizaines de K..
Maintenant, lorsque j'ouvre la page Web pour la première fois, ces endroits sont évidemment lents à charger, et il semble que tous les styles sont manquants. Après le chargement, les images sont affichées.
Existe-t-il un moyen d'accélérer le chargement du CSS ? En d'autres termes, laissez ces images se charger et paraître plus synchrones avec la page, sans laisser d'espace vide en attente de chargement ? !
J'utilise nginx et c'est parti. https et http2...
Y a-t-il une solution, pas nécessairement une accélération.

Answer 1

Soyez simplement paresseux et chargez de manière décisive, c'est simple et facile à utiliser

Answer 2

Préchargez les images et ajoutez le calque de chargement, les performances sont légèrement réduites, mais l'expérience est bien meilleure

Answer 3

Si une page est utilisée à plusieurs endroits, vous pouvez d'abord réduire le nombre de requêtes, traiter l'image en image sprite, puis compresser l'image. En fait, il s'agit toujours d'analyser le problème spécifique. pour voir le code plus spécifique

Answer 4

Les ressources statiques peuvent être placées sur CDN Si l'image est volumineuse, un préchargement ou un chargement différé est recommandé. Lors d'un chargement paresseux, il est recommandé d'utiliser CSS pour occuper l'espace à l'avance afin d'éviter une redistribution inutile. Autre remarque : si l'image est trop grande, il n'est pas recommandé d'utiliser une image sprite.

Answer 5

1. La méthode la plus paresseuse est lazyload

Answer 6

Tout d'abord, il va sans dire l'image du sprite. Bien sûr, il faut aussi regarder la taille

.

Deuxièmement, regardez la zone où se trouve l'image. Si certaines images ne se trouvent pas dans la zone de visualisation immédiate, vous pouvez utiliser le chargement différé

.

Si aucune des conditions ci-dessus n'est remplie, vous pouvez réduire la taille de l'image grâce à la compression d'image