Maison > interface Web > js tutoriel > le corps du texte

Comment optimiser le chargement des images

一个新手
Libérer: 2017-09-26 10:22:04
original
2020 Les gens l'ont consulté

Il y a un grand nombre d'images sur une seule page (grand site de commerce électronique), et le chargement est très lent. Les méthodes suivantes peuvent optimiser le chargement de ces images et donner aux utilisateurs. une meilleure expérience.

1. Chargement paresseux des images , faites défiler jusqu'à la position correspondante avant de charger l'image. (La distance depuis le hautVous pouvez ajouter un événement de barre de défilement dans la zone invisible de la page pour déterminer la distance entre la position de l'image et le navigateuret la page, si le premier est plus petit que le second, chargé en premier)

2. Préchargement d'images, s'il s'agit d'un diaporama, d'un album photo, etc., les images précédentes et suivantes seront affichées. L’une sera téléchargée en premier.

3. Utilisez CSSsprite, SVGsprite, Iconfont, Base64 et d'autres technologies, si l'image est une image CSS.

4. Si l'image est trop grande, vous pouvez utiliser une image spécialement encodée lors du chargement, une vignette particulièrement compressée sera chargée en premier pour améliorer l'expérience utilisateur.

5.Si la zone d'affichage de l'image est plus petite que la taille réelle de l'image, elle sera traitée en premier sur Côté serveur en fonction des besoins de l'entreprise. Compression de l'image, la taille de l'image compressée est cohérente avec l'affichage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal