Comment puis-je précharger des images en JavaScript pour améliorer les performances d'un site Web ?

Comment précharger des images à l'aide de JavaScript

La fonction fournie pour le préchargement des images, preloadImage, est suffisante pour la majorité des navigateurs couramment utilisés aujourd'hui. Il utilise l'objet Image pour charger de manière asynchrone l'image spécifiée, sans l'afficher réellement. Voici comment cela fonctionne :

function preloadImage(url) {
  var img = new Image();
  img.src = url;
}

En attribuant l'URL de l'image à la propriété src de l'objet Image, le navigateur est invité à lancer une requête asynchrone pour récupérer l'image. Le navigateur continuera à traiter d'autres scripts pendant le chargement de l'image. Une fois l'image chargée avec succès, elle est accessible via l'objet img pour le rendu ou d'autres opérations.

Il est important de noter que le processus de préchargement est asynchrone et non bloquant. Cela signifie que l'exécution d'autres scripts ne sera pas bloquée pendant le chargement des images. En tant que tel, il est conseillé d'effectuer une boucle de manière asynchrone sur un tableau d'URL d'images et d'appeler preloadImage pour chaque URL afin de précharger efficacement plusieurs images simultanément.

Cette technique est largement prise en charge par les navigateurs, notamment Chrome, Firefox, Safari, Opera. et Microsoft Edge. Il s'agit d'une méthode fiable pour précharger les images et améliorer les performances des applications Web en réduisant le temps de chargement perçu des images susceptibles d'être utilisées.

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!