Discussion :

[_youri]

bonjour,
Je suis entrain de construire un site en parallax avec des images en background en css.
Existe-il un moyen de faire une bar de chargement des images en javascript.
Ca se fait plus facilement quand on utilise la balise image voir : https://codepen.io/JTParrett/pen/EcwlF
mais ici j'utilise background-image.
Merci

[Beginner.]

Salut,

Ben je n'ai pas compris, ce que tu donnes en lien ne te convient pas ?

Sinon on en a discuté dans un fil, il y a un exemple concret d'ailleurs ici : Insérer un "loader" dans une page et /ou un compteur d'octets

[_youri]

non ça ne marche pas sur mon lien car
la source de mes images ne provient pas de <img src="">
mais d'un id appliqué sur une div

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#photo1 {
	background: url(img/photo1-bg.jpg) center 0 no-repeat fixed;
}

j'ai essayé loadie.js mais ça ne marche pas ! car javascript appelle la class de la div img pour comptabiliser si elle est chargée ou non.

[_youri]

dans ton lien, http://blog.site-web-creation.net/jquery-loader/ il parle de la possibilité de
détecter les background-image, donc ça devrait fonctionner..., j'ai du mal inséré le code
car quand je vide mon cache la barre atteint les 100% avant d'avoir chargé les images !

[Beginner.]

Ce n'ai pas moi qui ai donné ce lien dans le fil que je t'ai indiqué et je ne l'ai pas testé, je ne connais pas Jquery...... Mais si j'ai bien compris il cherche toutes les images dans le CSS (background, background-image...), il prend leur adresse et "fabrique" pour chacune d'elles un élément <img> avec src...

Après je suppose qu'on peut appliquer le principe (utiliser onload sur tous les élément <img>) dont on a parlé dans l'autre fil.

Mais je me demande si, du coup, les images ne seront pas chargés deux fois ?
Et aussi à quel moment on est censé faire ça ? Puisque qu'il faut bien avoir accès au CSS, et cela suppose que le chargement commence avant !

Du coup je me demande si cela affiche vraiment la progression ou bien si ça te dit juste à la fin le pourcentage des images chargées.

[Doksuri]

salut,

une idee (si ce que tu as teste ne te conviens pas) :
utiliser ton script de base et charger toutes tes images dans un div en display:none;
ainsi tu peux controler le chargment de test images comme tu le faisais deja. et quand elles sont chargee, tu les place en background-image
(on peut imaginer : <img src="http://placekitten.com/300/300" bgi="#tonDiv" />)
et utiliser l'attribut bgi pour placer l'image en background du bon div