Préchargement d’images à l’aide de CSS uniquement

 body::after{ position:absolute; width:0; height:0; overflow:hidden; z-index:-1; content:url(img01.png) url(img02.png) url(img03.png) url(img04.png); } 

Démo

il est préférable d’utiliser une image de sprite pour réduire les requêtes http …
(s’il y a beaucoup d’images de taille relativement petite)

Je peux confirmer que mon code d’origine semble fonctionner. Je collais avec désinvolture à une image avec un mauvais chemin.

Voici un test: http://paragraphe.org/slidetoggletest/test.html

http://css-sortingcks.com/snippets/css/css-only-image-preloading/

Technique n ° 1

Chargez l’image sur l’état normal de l’élément, ne le déplacez que dans l’arrière-plan. Puis déplacez la position de l’arrière-plan pour l’afficher en vol stationnaire.

 #grass { background: url(images/grass.png) no-repeat -9999px -9999px; } #grass:hover { background-position: bottom left; } 

Technique n ° 2

Si l’élément en question a déjà une image d’arrière-plan appliquée et que vous devez modifier cette image, ce qui précède ne fonctionnera pas. En général, vous optez pour un sprite ici (une image de fond combinée) et déplacez simplement la position de fond. Mais si ce n’est pas possible, essayez ceci. Appliquez l’image d’arrière-plan à un autre élément de page déjà utilisé, mais sans image de fond.

 #random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; } #grass:hover { background: url(images/grass.png) no-repeat; } 

essayez avec ceci:

 var c=new Image("Path to the background image"); c.onload=function(){ //render the form } 

Avec ce code, vous préchargez l’image d’arrière-plan et restituez le formulaire lorsqu’il est chargé

Si vous réutilisez ces images bg ailleurs sur votre site pour les entrées de formulaire, vous souhaiterez probablement utiliser une image-object. De cette façon, vous pouvez gérer vos images de manière centralisée (au lieu d’avoir pic1, pic2, pic3, etc.).

Les sprites sont généralement plus rapides pour le client, car ils ne demandent qu’un fichier (quoique légèrement plus gros) du serveur au lieu de plusieurs fichiers. Voir l’article SO pour plus d’avantages:

Sprites d’image CSS

Encore une fois, cela pourrait ne pas être utile du tout si vous ne les utilisez que pour un seul formulaire et que vous ne voulez vraiment les charger que si l’utilisateur demande le formulaire de contact… cela peut être logique.

http://www.alistapart.com/articles/sprites

Pour le préchargement d’images d’arrière-plan définies avec CSS, la réponse la plus efficace a été une version modifiée d’un code que je n’ai pas trouvé:

 $(':hidden').each(function() { var backgroundImage = $(this).css("background-image"); if (backgroundImage != 'none') { tempImage = new Image(); tempImage.src = backgroundImage; } }); 

L’avantage majeur de ceci est que vous n’avez pas besoin de le mettre à jour lorsque vous apportez de nouvelles images d’arrière-plan dans le futur, il trouvera les nouvelles images et les préchargera!

Précharger des images en utilisant HTML Tag

Je pense que la plupart des visiteurs de cette question recherchent la réponse “Comment puis-je précharger une image avant le début du rendu de la page?” La meilleure solution à ce problème est d’utiliser la car la balise est capable de bloquer le rendu ultérieur de la page. Voir préemptif

Ces deux options de valeur de l’ rel ( relation entre le document actuel et le document lié ) sont les plus pertinentes pour le problème:

• prefetch : charge la ressource donnée lors du rendu de la page
• preload : charge la ressource donnée avant que le rendu de la page ne commence

Donc, si vous voulez charger une ressource ( dans ce cas, c’est une image ) avant le début du processus de rendu de la , utilisez:

et si vous voulez charger une ressource pendant que rendu mais que vous prévoyez de l’utiliser plus tard de manière dynamic et que vous ne voulez pas déranger l’utilisateur avec le temps de chargement, utilisez:

que diriez-vous de charger cette image d’arrière-plan quelque part cachée. De cette façon, il sera chargé lorsque la page est ouverte et ne prendra pas de temps une fois que le formulaire est créé en utilisant ajax:

 body { background: #ffffff url('img_tree.png') no-repeat -100px -100px; } 

Vous pouvez utiliser ce plugin jQuery waitForImage ou vous pouvez placer vos images dans un div ou (width: 0 et height: 0) cachés et utiliser un événement onload sur les images.

Si vous ne disposez que de 2 à 3 images, vous pouvez lier des événements et les déclencher dans une chaîne. Ainsi, après chaque image, vous pouvez créer du code.

Lorsqu’il n’y a aucun moyen de modifier le code CSS et de précharger les images avec des règles CSS pour :before ou :after pseudo-éléments, une autre approche avec du code JavaScript traversant les règles CSS des feuilles de style chargées peut être utilisée. Pour que cela fonctionne, les scripts doivent être inclus après les feuilles de style en HTML, par exemple, avant de fermer body balise body ou juste après les feuilles de style.

 getUrls() { const urlRegExp = /url\(('|")?([^'"()]+)('|")\)?/; let urls = []; for (let i = 0; i < document.styleSheets.length; i++) { let cssRules = document.styleSheets[i].cssRules; for (let j = 0; j < cssRules.length; j++) { let cssRule = cssRules[j]; if (!cssRule.selectorText) { continue; } for (let k = 0; k < cssRule.style.length; k++) { let property = cssRule.style[k], urlMatch = cssRule.style[property].match(urlRegExp); if (urlMatch !== null) { urls.push(urlMatch[2]); } } } } return urls; } preloadImages() { return new Promise(resolve => { let urls = getUrls(), loadedCount = 0; const onImageLoad = () => { loadedCount++; if (urls.length === loadedCount) { resolve(); } }; for (var i = 0; i < urls.length; i++) { let image = new Image(); image.src = urls[i]; image.onload = onImageLoad; } }); } document.addEventListener('DOMContentLoaded', () => { preloadImages().then(() => { // CSS images are loaded here }); }); 

Si les éléments de la page et leurs images d’arrière-plan sont déjà dans le DOM (c’est-à-dire que vous ne les créez / modifiez pas dynamicment), leurs images d’arrière-plan seront déjà chargées. À ce stade, vous voudrez peut-être examiner les méthodes de compression 🙂

Le seul moyen est de coder l’image Base64 et de la placer dans le code HTML afin qu’elle n’ait pas besoin de contacter le serveur pour télécharger l’image.

Cela va encoder une image à partir de l’url afin que vous puissiez copier le code du fichier image et l’insérer dans votre page comme ça …

 body { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...); }