Implémentation des images de préchargement JS

Cet article partage principalement avec vous l'implémentation du préchargement des images JS, en espérant aider tout le monde.

Exigence : cliquez sur le bouton dans le projet pour réaliser la fonction de changement d'image d'arrière-plan.
Problème : lors du changement de l'attribut background-image du CSS, si l'image est chargée en premier puis affichée, il y aura une période vide momentanée.

Solution : Précharger l'image de fond à l'avance
Utilisez d'abord le constructeur Image() pour créer un objet image hors écran, puis définissez l'attribut src de l'objet sur l'URL. Étant donné que l'élément image n'est pas ajouté au document, il est invisible, mais le navigateur se chargera toujours. l'image et mettez-la en cache.

function preloadImg(url){
  var imageObj = new Image()
  imageObj.src=url
}var aImgUrlList = ['image1.png', 'image2.png']for (var i of aImgUrlList)
    preloadImg(i)

Recommandations associées :

Méthode d'image de préchargement JS summary_javascript skills

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!