Discussion :

[DarkChamallo]

Bonjour,

depuis hier je me triture la tête et essaie tous les scripts du web francophones ou anglophones... pour en arriver à la conclusion : personne n'a besoin d'un onLoad sur un DIV à part moi

LE BUT : j'ai besoin d'afficher un DIV uniquement lorsqu'il est chargé complètement (dont images indénombrables à l'avance), c'est tout

LE PROBLEME : quoique j'essaie, toutes les méthodes connues ne permettent que : soit de détecter le chargement d'une page et non d'un div (qui a besoin de changer APRES que la page est déjà chargée), soit de détecter le chargement du code d'un DIV mais pas de ses images.

RESULTAT : dans le meilleur des cas je sais quand un DIV a été modifié, mais pas quand il est totalement chargé (images).


CE QUI NE MARCHE PAS :

prototype.js -> la fusée pour transporter un grin de riz : malgré toute l'attirance médiatique du dit fichier, il n'a pas de fonction magique qui résoud mon cas, du coup inutile de se charger son cerveau de 125 kilos sur la tête

XMLHttpRequest & compagnie -> le fonctionnaire qui n'a pas prévu : ce n'est que la requête et sa réponse que l'on peut détecter, ça nous dit que le contenu a bien été transmis, mais ça ne vérifie pas qu'il s'est affiché totalement (malgré un readyState à 4 et un status à 200, rien ne permet de savoir qu'une pauvre image géante est encore en train de charger malgré que la fenêtre du navigateur semble avoir terminé tout chargement).

addEventListener("DOMNodeInserted" & compagnie -> l'éjaculateur précoce optimiste : ça détecte que le DIV a été modifié au niveau du code source et ça crie victoire mais ça ne vérifie pas que les images présentes ont fini de se charger

LA SEULE SOLUTION ENVISAGEABLE : un bricolage maison qui va compter le nombre d'images présentes dans le code à injecter au div + mettre un onload à chaque image avec JS qui incrémente un compteur + compteur qui signale enfin que le compte y est : la page est chargée ! tadaaaaaaaa

Pitité, dites-moi qu'il y a une autre solution ?

[SpaceFrog]

fais une fonction qui opère un test en boucle sur toutes les images contenues dans le div...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function testImages(){
var Mondiv=document.getElementBYId('iddudiv');
var TabImages=Mondiv.getElementsByTagNamle('img')
var AllDOne=TabImages.length
var Loaded=0
for(i=0,TabImages[i];i++){
 if (TabImages[i].complete){Loaded++}
}
if(Loaded==AllDone){
                                  clearInteval(Boucle)
                                  Mondiv.style.display='block';
                                  }
}

et sur le onload du body:

Code :

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

Boucle=setInterval(testImages(),100)

[le_chomeur]

lut ^^
la seule méthode que je vois , c'est utiliser la méthode .complete sur toutes les images que tu récupères dans ta div, :

document.getElementById('tadiv').getElementsByTagName('img')

tu parcours ta collection pour vérifier que chaque image est chargé sinon tu rappel ta méthode ( donc de façon récursive )

[DarkChamallo]

merci à tous les deux (ex aequo-posteurs) vu que vous êtes modos ça me rassure : ce que je suggérais est donc acceptable, merci pour les codes...

En revanche, une idée pour les images chargées depuis un CSS ? (donc pas de balise img dans la source), sachant que je peux utiliser des dizaines de styles différents je ne me vois pas faire des test et boucles sur de multiples styles, ça risque de ralentir le navigateur, non ? Du coup, devrais-je obligatoirement précharger les images concernées ou verriez-vous une autre astuce ? En tous cas déjà merci

[SpaceFrog]

chargées en css ???
tes images sont en background ???

fasi plutot un array d'images prelaodé et teste le complete sur l'array ?

[DarkChamallo]

chargées en css ???
tes images sont en background ???

oui, en fait une partie sont des illustrations (via css) et l'autre des photos (des img dans la page).

chargées en css ???
fasi plutot un array d'images prelaodé et teste le complete sur l'array ?

oui, je voyais que ça aussi, donc en faisant un mixage des 2 manips proposées ici en 1 seule passe j'aurai donc un onload pour div

c'est dommage que ce ne soit pas un évenement officiel, ça oblige à alourdir le code et la navigation.

en tous cas merci beaucoup et @+