Vérifier le chargement d'un backgroundImage ?

**floflo.hp** · 07/12/2015, 12h27

Bonjour,

Pour un projet de première année universitaire, je tente d'ajouter à mon premier projet de site une page de chargement. Le chargement concerne essentiellement les images plus ou moins lourdes qui peuvent mettre du temps à s'afficher entièrement, le reste comme le texte n'est relativement pas important dans le chargement. Le but étant de réaliser une page de chargement 'dynamique', donc qui évolue selon le taux de chargement (0 à 100%), pour se faire, nous vérifions généralement si l'image est chargée, soit avec l’événement .onload, ou bien .complete que je viens de découvrir.

Le problème, c'est qu'une bonne partie des images concernées sont des background-image, et les méthodes .onload ou .complete ne semblent donc plus fonctionner. A priori, je ne sais que récupérer l'url de l'image de fond, avec par exemple :

Code :

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

window.getComputedStyle(document.getElementsByTagName("header")[0],'').backgroundImage

Voici donc mes questionnements :
Y a-t-il moyen de savoir si une image de fond est entièrement chargée ?
Si oui, comment serait-il possible de le détecter ?

PS: J'ai essayé aussi en vérifiant que la balise "header", par exemple, soit chargé, or il m'indique que la balise est chargé avant même que l'image de fond ne le soit, donc a priori, il ne la prend pas en compte ...

**NoSmoking** · 07/12/2015, 15h16

Bonjour,
contourne le problème en utilisant des new Image() même pour les images en background.

**floflo.hp** · 07/12/2015, 18h19

Ok, donc si j'ai bien compris le principe, cela donne :

- On appelle l'image dans notre JavaScript à l'aide de l'instruction new Image() (dont nous ne faisons pas interagir avec le code HTML)

- Une image, même appelée 10'000 fois dans notre page, ne charge qu'une fois
Donc, si le new Image() est chargé, alors c'est que mon image, même en BackgroundImage, est bien chargé ?