Preload d'images insérées dynamiquement
Bonjour a tous,
j'ai actuellement un petit problème sur un code de slideshow un peu atypique pour afficher des images. le conteneur est une liste <ul><li> et les images sont insérés avec la méthode append de jquery en dehors du champs puis mis en avant avec la methode animate
globalement ca marche très bien et le rendu me plait, sauf que le animate ne fonctionne que si l'image a bien été chargée (en gros une fois sur deux), dans le cas contraire elle reste en dehors du champs et donc invisible (par défaut l'image est en position relative au li a -100px en left / -100px en top
ma question est la suivante: y'a t'il un moyen de gérer un event $(img).load(function(){}); pour un élément qui n'existe pas encore vu qu'il est chargé, puis mis dynamiquement dans le DOM, afin d'utiliser la fonction animate uniquement quand l'image a bien été chargée.
Ci joint une bribe du code actuel:
(premiere partie du code supprimée afin de rendre ca un peu plus lisible mais cela ne concerne que la génération du itemNumber de facon aléatoire et une seule fois de manière a ce que la même image ne soit pas insérée plusieurs fois)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function dispose(){
var itemPic = preloadSlide(contacts[itemNumber]);
$('#slideContact li').eq(itemNumber).append(itemPic);
// random animation (appear by left or top side)
var randomAnimation = getRandomInt(1,2);
if(randomAnimation == 1){
$('#slideContact img').eq(itemNumber).css('top','0px');
$('#slideContact img').eq(itemNumber).animate({
left: '0px'
});
}else{
$('#slideContact img').eq(itemNumber).css('left','0px');
$('#slideContact img').eq(itemNumber).animate({
top: '0px'
});
}
}
} |
Pour info ma fonction preloadSlide ressemble a ca:
Code:
1
2
3
4
5
| function preloadSlide(obj){
var pic = new Image();
pic.src = "images/" + obj['image'];
return pic;
} |
J'ai testé d'imbriquer la partie animation dans un truc du genre mais il ne reconnait pas le load dans ce cas là
Code:
1
2
3
| itemPic.load(function(){
// random animation...
}); |
j'ai remplacé itemPic par $('#slideContact img').eq(itemNumber) mais idem (je pense que cela vient encore du fait que l'image n'existe pas vraiment encore au moment ou j'essaye d'interagir avec).
Bref la je suis un peu perdu et du coup j'aurai besoin d'un avis extérieur
Merci d'avance pour votre aide
