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

[Beginner.]

Je ne connaissais pas "bgi"... Mais si ce n'est pas ta page et qu'il y a des "background-image" dans un fichier css, est-ce que ça marche ?

Parce que dans le lien apparemment, 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...

Du coup cela fonctionnerait pour n'importe quelle page ? Mais dans ce cas est-ce que les images ne seront pas chargés deux fois ?

[Doksuri]

"bgi" etait un exemple (pour Back Ground Image) tu peux l'apeller "toto" si tu veux
mais juste ajouter un attribut pour savoir dans quel div placer l'image telechargee (en tant que background-image)

[_youri]

merci Doksuri pour ses précisions, du coup j'ai mis toutes les images dans une div en display none, et j'ai rajouté la class loaded image, comme dans l'exemple http://www.jqueryscript.net/demo/jQu...gin-Loadie-js/
la barre de progression semble fonctionner correctement quand le cache est vide avec FF, mais si je réactualise la page la barre ne fini pas entièrement sa course http://thibautgraph.fr/test alors que toutes les images sont chargées !

[Doksuri]

ha ! moi j'ai le comportement inverse (sous chrome)

1er chargement : la barre reste a ~90%, et apres, elle n'a meme pas le temps d'apparaitre (cache navigateur)

peut-etre que dans ton nombre d'images (ou images totales) t'as du mettre (ou oublier) 1

[_youri]

En tout j'ai 25 images, qui sont toutes déclarées avec la class loaded-image,
le reste sont des images de petite taille qui n'ont pas besoin d'être préchargée.
Doksuri as-tu toujours le bug sous Chrome ?