Préchargement des Images CSS
j'ai un formulaire de contact caché qui est déployé en cliquant sur un bouton. Ses champs sont définis comme des images de fond CSS, et ils apparaissent toujours un peu plus tard que le div qui a été basculé.
j'utilisais cet extrait dans la section <head> , mais sans succès (après avoir effacé le cache):
<script>
$(document).ready(function() {
pic = new Image();
pic2 = new Image();
pic3 = new Image();
pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png";
pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png";
pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png";
});
</script>
j'utilise jQuery comme bibliothèque, et ce serait cool si je pouvais l'utiliser aussi pour organiser ce numéro.
Merci pour vos réflexions.
12 réponses
préchargement d'images à l'aide de CSS seulement
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 sprite pour réduire les requêtes http...
(s'il y a beaucoup d'images relativement petites)
je peux confirmer que mon code d'origine semble fonctionner. Je m'en tenais à une image avec un mauvais chemin.
voici un test: http://paragraphe.org/slidetoggletest/test.html
<script>
pic = new Image();
pic2 = new Image();
pic3 = new Image();
pic.src="images/inputs/input1.png";
pic2.src="images/inputs/input2.png";
pic3.src="images/inputs/input3.png";
</script>
http://css-tricks.com/snippets/css/css-only-image-preloading /
Technique n ° 1
Charger l'image sur l'élément régulier de l'état, qu'à bouger à fond. Puis déplacez la position de l'arrière-plan pour l'afficher en 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 background-image applied et vous devez changer cette image, le ci-dessus ne fonctionnera pas. Typiquement vous opteriez pour un sprite ici (une image d'arrière-plan combinée) et déplacez simplement la position d'arrière-plan. Mais si ce n'est pas possible, essayez ceci. Appliquez l'image d'arrière-plan à un autre élément de la page qui est déjà utilisé, mais qui n'a pas d'image d'arrière-plan.
#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 rendez le formulaire quand il est chargé
si vous réutilisez ces images bg n'importe où ailleurs sur votre site pour des entrées de formulaire, vous voulez probablement utiliser un sprite d'image. De cette façon, vous pouvez gérer vos images de façon centralisée (au lieu d'avoir pic1, pic2, pic3, etc...).
Les Spritessont généralement plus rapides pour le client, puisqu'ils ne demandent qu'un fichier (bien que légèrement plus grand) du serveur au lieu de plusieurs fichiers. Voir L'article SO pour plus de prestations:
encore une fois, cela pourrait ne pas être utile du tout si vous utilisez ceux-ci pour un seul formulaire et vous voulez vraiment les charger si l'utilisateur demande le formulaire de contact...peut faire sens.
Précharger les images en utilisant la balise HTML
je crois que la plupart des visiteurs de cette question sont à la recherche de la réponse de " Comment puis-je précharger une image avant que le rendu de la page commence?" et la meilleure solution pour ce problème est d'utiliser <link> tag parce que <link> tag est capable de bloquer le rendu ultérieur de la page. Voir préventif
Ces deux options de valeur de l'attribut rel ( relation entre le document actuel et le document lié ) sont les plus pertinentes avec le problème:
- prefetch : chargez la ressource donnée pendant le rendu de la page
- preload : charger la ressource donnée avant le début du rendu de la page
Donc, si vous voulez charger une ressource ( dans ce cas c'est une image ) avant le processus de rendu de <body> tag commence, utiliser:
<link rel="preload" as="image" href="IMAGE_URL">
et si vous voulez charger une ressource pendant que <body> est rendu mais que vous prévoyez de l'utiliser plus tard dynamiquement et ne voulez pas déranger l'utilisateur avec le temps de chargement, utiliser:
<link rel="prefetch" href="RESOURCE_URL">
pour précharger les images d'arrière-plan avec CSS, la réponse la plus efficace que j'ai trouvée était une version modifiée d'un code que j'ai trouvé qui n'a pas fonctionné:
$(':hidden').each(function() {
var backgroundImage = $(this).css("background-image");
if (backgroundImage != 'none') {
tempImage = new Image();
tempImage.src = backgroundImage;
}
});
le grand avantage de ceci est que vous n'avez pas besoin de le mettre à jour lorsque vous apportez de nouvelles images de fond dans le futur, il va trouver les nouveaux et Préchargez-les!
Que diriez-vous de charger cette image de fond 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 mettre vos images dans une div ou cachée (largeur:0 et Hauteur:0) et utiliser l'événement onload sur les images.
si vous avez seulement comme 2-3 images vous pouvez lier des événements et les déclencher dans une chaîne donc après chaque image vous pouvez faire du code.
quand il n'y a aucun moyen de modifier le code CSS et de précharger les images avec les règles CSS pour les pseudo-éléments :before ou :after une autre approche avec le 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 la fermeture de la 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 pas/ne les modifiez pas dynamiquement), alors leurs images d'arrière-plan seront déjà chargées. À ce point, vous pouvez regarder les méthodes de compression :)
la seule façon est de Base64 Encoder l'image et la placer dans le code HTML pour qu'elle n'ait pas besoin de contacter le serveur pour télécharger l'image.
ce encodera une image à partir de l'url pour que vous puissiez copier le code de fichier image et l'insérer dans votre page comme ainsi...
body {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}