Détecter le chargement dynamique d'un fichier JS, d'une image ou d'un fichier CSS

Sur Opera, Firefox et la plupart des navigateurs, la détection de chargement d'un fichier Javascript, d'une image ou d'un fichier CSS de façon dynamique (j'entends donc en temps réel avec Javascript) peut se faire avec une simple fonction événementielle nommée onload :


La fonction onerror permet de savoir si une erreur s'est produite.

Cependant, sur Internet Explorer, cela est plus compliqué. Il faut d'abord utiliser la fonction événementielle onreadystatechange. Jusque-là, rien de particulier. Sauf qu'Internet Explorer permet d'avoir des états sur le chargement, grâce à readyState, qui peut prendre plusieurs valeurs (loading, loaded, complete...).



La particularité provient de l'ordre des états.
IE6 :
- image : "loading" puis "complete"
- CSS : "complete"
- JS : "loaded"

IE7 :
- image : "loading" puis "complete"
- CSS : "loading" puis "complete"
- JS : "complete" puis "loaded"

Une fois qu'on a compris cela, on sait que les deux états de chargement sont "loaded" et "complete" et que s'il y a des traitements à faire après le chargement, il faut anticiper la possibilité qu'un rappel de ces traitements soit fait.