Précharger des images (CSS & HTML)
Redstoner26
-
jibouz12 -
jibouz12 -
Bonjour,
Voici un code en css :
qui permet d'afficher un backgroud différent pour une div toutes les 5 secondes, mais sauf que dès que le background change au début, l'image charge ce qui rend le slider, si je peux me permettre "dégueulasse".
J'aimerais précharger des images dès le début pour qu'il n'y ait moins de problèmes.
Merci d'avance
Voici un code en css :
@-webkit-keyframes background_transition
{
0% {background:url("images/present.jpg"); -webkit-background-size: cover; background-size: cover;}
25% {background:url("images/image_1.jpg"); -webkit-background-size: cover; background-size: cover;}
50% {background:url("images/image_2.jpg"); -webkit-background-size: cover; background-size: cover;}
75% {background:url("images/image_3.jpg"); -webkit-background-size: cover; background-size: cover;}
100% {background:url("images/present.jpg"); -webkit-background-size: cover; background-size: cover;}
}
qui permet d'afficher un backgroud différent pour une div toutes les 5 secondes, mais sauf que dès que le background change au début, l'image charge ce qui rend le slider, si je peux me permettre "dégueulasse".
J'aimerais précharger des images dès le début pour qu'il n'y ait moins de problèmes.
Merci d'avance
A voir également:
- Précharger des images (CSS & HTML)
- Des images - Guide
- Editeur html - Télécharger - HTML
- Images enregistrées ✓ - Forum Bluetooth
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? ✓ - Forum Python
- Voir ses images enregistrés - Forum Blender
1 réponse
Bonjour, il y a plusieurs méthodes, avec du CSS, avec du Javascript, par exemple, vu sur un site, tu peux précharger les images en mettant ceci au début du CSS :
L'image n'est pas visible mais bien préchargée donc que tu l'utilisera réellement, elle sera déjà dans le cache du navigateur.
D'autres méthodes plus poussées avec Javascript etc (ex: tu pourrais afficher une barre de progression sur le préchargement avant l'affichage de ta page...).
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
L'image n'est pas visible mais bien préchargée donc que tu l'utilisera réellement, elle sera déjà dans le cache du navigateur.
D'autres méthodes plus poussées avec Javascript etc (ex: tu pourrais afficher une barre de progression sur le préchargement avant l'affichage de ta page...).
créer une <div> avec toutes les images que tu veux précharger dedans et lui mettre un Display: none