Image Javascript surchargé

J'essaie de charger une nouvelle image chaque fois que l'image précédemment chargée a fini de charger. La fonction create_photo_list fonctionne correctement. Il crée un tableau des photos qui doivent être chargées. Si aucun ne doit être chargé, le tableau est vide. Le problème est que, lorsqu'il n'y a plus d'éléments à charger, il continue d'appeler la fonction load_next_photo.

La raison pour laquelle j'appelle le registerEventHandler à chaque fois dans la fonction est que si je ne le fais pas, la fonction n'est pas appelée lorsque la photo suivante est chargée.

function registerEventHandler(node, event, handler) { if (typeof node.addEventListener == "function") node.addEventListener(event, handler, false); else node.attachEvent("on" + event, handler); } // Remove an HTML element event handler such as onclick // ex: unregisterEventHandler($("textfield"), "keypress", showEvent); function unregisterEventHandler(node, event, handler) { if (typeof node.removeEventListener == "function") node.removeEventListener(event, handler, false); else node.detachEvent("on" + event, handler); } function load_next_photo() { var loading_list = create_photo_list(); alert(loading_list.length); if (loading_list.length > 0) { img[loading_list[0]]['loaded'] = 1; registerEventHandler($("load_img"), "onload", load_next_photo()); $("load_img").src = img[loading_list[0]]['img']; } else { alert("nothing"); unregisterEventHandler($("load_img"), "onload", load_next_photo()) } unregisterEventHandler($("load_img"), "onload", load_next_photo()) } 

Je ne peux pas me rapprocher de ce que vous avez actuellement, mais ce code fonctionne très bien:

 var _images = ["image1.jpg", "image2.jpg", "image3.jpg"]; var _index = 0; window.onload = function() { LoadImage(); }; function LoadImage() { //stop condition: if (_index >= _images.length) return false; var url = _images[_index]; var img = new Image(); img.src = url; img.onload = function() { _index++; LoadImage(); }; document.getElementById("Container").appendChild(img); } 

Cela ajoutera les images au conteneur (élément avec ID Container ) un par un, cas de test en direct: http://jsfiddle.net/yahavbr/vkQQ7/

Ceci est clairement JS, n'hésitez pas à vous renseigner sur une partie à élaborer. 🙂