Ordre de chargement avec Prototype

Cet après-midi, j'ai rencontré un bogue un peu spécial avec la librairie Prototype.js. Pour une raison particulière, plusieurs fonctions étaient reliées au même événement, celui du chargement de la page (load).

Comme d'habitude, tout fonctionnait à merveille dans Firefox mais une fois testé dans Internet Explorer, un message d'erreur JavaScript était lancé. Avec un collègue de travail, nous avons tenté un certain temps de chercher la réponse jusqu'à ce qu'on s'impatiente et qu'on décide de suivre la trace des appels à l'aide de Firebug (Firefox) et Firebug Lite (IE).

En considérant le snippet de code suivant (simplifié par rapport à l'exemple réel) :

/*
les scripts suivants sont inclus dans la page

/js/firebug-lite-min.js
/js/prototype-1.6.0.3-min.js

*/

document.observe('dom:loaded', function(){ console.log('dom:loaded # 1'); });
document.observe('dom:loaded', function(){ console.log('dom:loaded # 2'); });

Event.observe(window, 'load', function(){ console.log('load'); } );

On remarque que la séquence des appels dans Firefox (Firebug) indique :

"dom:loaded # 1"

"dom:loaded # 2"

"load"

Tandis qu'Internet Explorer 7 affiche (Firebug Lite) :

"load"

"dom:loaded # 2"

"dom:loaded # 1"

C'est à dire que le stack des appels aux fonctions est complètement inversé! Firefox semble les exécuter dans l'ordre rencontré FIFO (First In, First Out) tandis qu'IE agit en FILO (First In, Last Out) Comme nous avions une fonction qui initialisait dynamiquement un composant d'interface et que la deuxième prenait le relais en prenant pour acquis que les changements avaient été appliqués précédemment, la séquence du code rencontré n'était pas respectée et IE se plaigna tout simplement que l'objet n'était pas trouvé dans la page.

Comme on ne fait pas de miracle, on a tout rapatrié dans la même fonction. Si quelqu'un croit avoir la solution, n'hésitez pas à me la partager.