J'ai un diaporama sur ma page d'accueil. Il se compose de 2 images.diaporama javascript croître plus vite, pourquoi?
Je précharge ces 2 images, en faisant new Image() et en leur affectant .src.
J'ai une fonction giveNextName qui renvoie le nom de l'image suivante (qui devrait être en src attribut de l'élément img) (je fais cela, parce que bientôt, diaporama sera composé de plus de 2 images)
donc le code principal ressemble à:
BillBoard = {};
BillBoard.folder = "/pictures/cards/";
BillBoard.ext = "png";
BillBoard.$ = $("#billboard img");
BillBoard.pics = 2;
BillBoard.changeTime = 7000;
BillBoard.names = ["ad1","ad2"];
BillBoard.currentState = 0;
BillBoard.images = // array of preloaded Images
(function(){
var image, images = [];
for (var i=0; i<BillBoard.pics; i++) {
image = new Image();
image.src = BillBoard.folder+BillBoard.names[i]+'.'+BillBoard.ext;
images.push (image);
}
return images;
}());
BillBoard.giveNextName = function(){/* getting the next name */};
// BillBoard change action
BillBoard.change = function(){
BillBoard.$.fadeOut(function(){
$(this).attr('src', BillBoard.giveNextName());
$(this).fadeIn();
});
}
// Starting BillBoard
window.setInterval(BillBoard.change, BillBoard.changeTime);
Donc, l'idée est simple. avec window.setInterval J'appelle BillBoard.change toutes les n secondes. Mais, je ne sais pas pourquoi, le panneau change de plus en plus vite, jusqu'à ce qu'il n'y ait plus d'image (fadeIn n'a pas le temps d'exécuter)
Où est mon erreur?
UPD. Merci à Yann Ramin pour le lien. Je ne devrais pas appeler BillBoard.change toutes les n secondes via window.setInterval. Au lieu de cela, je devrais ajouter l'appel de BillBoard.change dans le rappel de fadeOut().
Je veux dire ce code:
BillBoard.change = function(){
BillBoard.$.fadeOut(function(){
$(this).attr('src', BillBoard.giveNextName());
$(this).fadeIn();
window.setTimeout(BillBoard.change, BillBoard.changeTime);
});
}
// simply call the change function
// it will be calling itself every n seconds
BillBoard.start = (function(){
window.setTimeout(BillBoard.change, BillBoard.changeTime);
}());