Existe-t-il un moyen de charger des images sur le cache de l'utilisateur de manière asynchrone?

J'ai une liste d'articles. Chacun d'entre eux est un carré avec un nom, et lorsque l'utilisateur se positionne sur le carré, une image apparaîtra, ce qui est fait par jQuery. Le code est comme ceci:

$('.square').hover(function() { var link = $(this).attr('title'); $(this).addClass('squarehover') .css({backgroundImage: 'url(images/' + escape(link) + '.jpg)'}); }, function() { $(this).removeClass('squarehover') .attr('style', ''); }); .squarehover { font-size: 0px; background-repeat: no-repeat; background-size: 100%; -moz-background-size: 100%; background-position: center center; position: absolute; z-index: 10; cursor: pointer; } 

Si les images ne sont pas chargées au préalable, il y aura un petit retard lors du survoltage. De plus, je ne souhaite pas afficher la page après avoir fini de charger toutes les images.

Étant donné que les images ne sont pas explicitement affichées dans la page, est-il possible de charger d'abord la page, puis de commencer à charger des images sur le cache de l'utilisateur (mon idée est que l'utilisateur ne déplacera pas immédiatement la souris sur ces cases)? Comment faire si il n'y a pas de <img> dans HTML?

BTW, car la background-size n'est pas prise en charge dans IE8, comment faire face à cela?

• Charger conditionnellement le fichier JavaScript
• Définir la valeur par défaut pour un formulaire de fichier d'entrée
• Désactiver le glissement d'une image à partir d'une page HTML
• OnClick Ouvrir la fenêtre et la taille spécifique
• Puis-je émettre l'événement de parent à enfant dans Angular 2

• Comment puis-je arrêter mon contenu Web de passer en mode Gauche lorsque la barre de défilement verticale apparaît? Roll-Up of Advice 2017
• Comment lire le contenu du fichier xml dans jQuery et afficher dans les éléments html?
• JavaScript pour faire défiler la page longue vers DIV
• Comment faire pour défiler automatiquement jusqu'à la fin de div lorsque les données sont ajoutées?
• JQuery: Comment écouter les modifications DOM?

 function preloadImages(srcs) { if (!preloadImages.cache) { preloadImages.cache = []; } var img; for (var i = 0; i < srcs.length; i++) { img = new Image(); img.src = srcs[i]; preloadImages.cache.push(img); } } // then to call it, you would use this var imageSrcs = ["src1", "src2", "src3", "src4"]; preloadImages(imageSrcs);