Comment controler le chargement de toutes mes images

[pierrot10]

Bonour à tous,

J'ai un petit problème,
Je charge sur une page une 20ène d'images.
Evidemment, la page met un certain pour ce charger.

Je souhaiterais comment utiliser .load() sur toutes les images.
En d'autre mots, j'aimerais bien que un loader qui troune soit afficher à la place de chauqe image, et quand tout est charger, les image s'affiche à la place.

Pourriez-vous me mettre sur la voix?

Je sais que la fonction .load() pourra mainder, mais je ne sais pas comment jongler avec l'image sablier et l'image qui se charge et qui doit etre affichées après

[danielhagnoul]

Bonsoir

La méthode load() n'est pas la bonne solution pour les images (voir http://api.jquery.com/load-event/ : Caveats of the load event when used with images).

Pour être certain que le DOM est "ready" et que tous les éléments graphiques de la page sont chargés avant d'agir, il faut utiliser la méthode load() sur window.

Code :

1
2
3
4
5
6
7
8
9
$(function(){
  // DOM ready
  // votre code jQuery qui n'agit pas et qui ne dépend pas des graphiques
});
 
$(window).load(function () {
  // page ready
  // votre code jQuery qui agit ou qui dépend des graphiques
});

[pierrot10]

Ben j'essaye ceci, mais je suis pas trop d'y arrivé. Du moins pas encore.
J'ai créé cette fonction

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function loadingImages(folder)  
{  
    //$("."+loader).html('<img src="images/loading.gif"> saving...');  
 
	$.ajax({  
        type: "POST",  
        url: "include/loadImages.php",  
        data: {'folder' : folder},
        success: function(msg){  
            $(".load").html('reussi');  
        }  
    });
 
}

Dans mon fichier loadImages.php j'ai ceci:

Code PHP :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?php
		$folder = $_POST['folder'];
		$a=array();
		if ($handle = opendir('images/albums/'.$folder.'/')) {
			while (false !== ($file = readdir($handle))) {
			   if(preg_match("/\.png$/", $file)) {
					$a[]=$file;
			   }else if(preg_match("/\.jpg$/", $file)) {
					$a[]=$file;
			   }else if(preg_match("/\.jpeg$/", $file)) {
					$a[]=$file;
			   }
			}
			closedir($handle);
		}
echo '<ul class="slider">';
		foreach($a as $i){
			echo '<li class="loadedImages"><img src="images/albums/'.$folder.'/'.$i.'" /></li>';
		}
echo '</ul>';
?>

J'ai aussi qui dérouler le bloque qui doit afficher les images

Code :

1
2
3
4
5
6
7
8
9
10
 
$('.aLemas').click(function() {
		if ($("#lemas").is("#lemas:hidden")) {
			$("#lemas").slideDown("slow");
 
 
		}else{
			$("#lemas").slideUp("slow");
		}
	});

Ce que j'aimerais ce que lorsque je clique sur <a class="aLemas">, la fonction loadingImages() soit appelée et que les image soit affiché dans #lemas.

Ce que je n'arrive pas faire!

[pierrot10]

Je pense faire un truc du genre

Code :

$("#lemas").prepend(loadingImages())

chais pas...

[pierrot10]

J'ai réussi,le seul truc que je n'arrive pas. J'aimerais qu'une image (un sablier )s'affiche en attendant le la requet ajax soit terminée.
Si dessous, il y a "success".
Il n'y a pas un truc qui dit "pendant" qui agirait avant "success"?

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function loadingImages(folder,prependTo)  
{  
    //$("."+loader).html('<img src="images/loading.gif"> saving...');  
 
	$.ajax({  
        type: "POST",  
        url: "/include/loadImages.php",  
        data: "folder="+folder,
        success: function(msg){  
            $("#"+prependTo+" .container").html(msg); 
 
			$('ul.slider').cycle({ 
    			fx:     'fade', 
    			speed:  1000, 
    			timeout: 0, 
    			next:   '.next', 
    			prev:   '.prev' 
			});
        }  
    });
 
}

[Macmillenium]

Regarde plutôt du coté du plugin Lazy Load.