Précharger des images (CSS & HTML)

Fermé

Redstoner26 - 28 sept. 2015 à 23:15
jibouz12 - 2 oct. 2022 à 23:26

Bonjour,

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)
Editeur html - Télécharger - HTML
Des images - Guide
Retour à la ligne css - Forum CSS
Html download - Télécharger - HTML
Br html ✓ - Forum Webmastering

1 réponse

Réponse 1 / 1

Utilisateur anonyme
28 sept. 2015 à 23:33

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 :

#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...).

Redstoner26
28 sept. 2015 à 23:59

Merci

Zecristof
30 janv. 2016 à 23:02

Sauf que cette méthode ne fonctionne pas...

jibouz12
2 oct. 2022 à 23:26

créer une <div> avec toutes les images que tu veux précharger dedans et lui mettre un Display: none

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)

Image cliquable dans html

code couleur associé a une image

&nbsp ; Quelle Fonction ?

Espace en HTML

Discussions similaires

Newsletters