Preload d'images insérées dynamiquement

**Shadow69** · 25/04/2013, 22h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**danielhagnoul** · 27/04/2013, 11h19

Bonjour

La méthode load fonctionne bien.

Pour tester, il suffit de copier-coller ma page de test.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					var ObjImage = new Image();
 
					$( "#pictures > p" ).each( function( i, item ){
 
					    $( ObjImage )
					    	.clone()
					    	.attr( "src", "http://danielhagnoul.developpez.com/images/" + $( item ).text() )
					    	.load( function(){
						    	console.log( "loaded" );
						    	$( this ).appendTo( "section.conteneur" );
						    });
 
					});
 
				});
 
				$( window ).load( function(){
 
				});
 
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1333666/jquery/ajouter-nouveau-tr-au-dernier-tr-click/">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="pictures">
			<p>imageTest.png</p>
			<p>badge.jpg</p>
			<p>avatarDVJH.jpg</p>
			<p>appointment.png</p>
			<p>arrow-forward_32.gif</p>
			<p>canvas7.png</p>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-04-27T02:02:15.367+02:00" pubdate>2013-04-27T02:02:15.367+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>