Forum d'entraide PHPFrance

Bonjour,

Au moment du chargement de ma page j'appelle la fonction suivante :

<body onload="preload();">

qui appelle une fonction qui se trouve dans un fichier à part, qui contient le code suivant :

function preload()
{
//Preload des images du menu
<?php
$j=1;
list_dir("../screenshots",$j);
?>
}

Le code écrit se trouve dans la fonction php suivante :

function list_dir($name,$j) {   
  $i=0;
  if ($dir = opendir($name)) {   
    while(false !== ($file = readdir($dir))) {   
    	if(is_file($name.'/'.$file) && in_array(substr(strrchr($file,'.'),1),array("gif","jpg","png"))) 
    	{
    		$i++;
    		echo "img_".$j."_".$i." = new Image();\n";
    		echo "img_".$j."_".$i.".src = '".$name.'/'.$file."';\n"; 
    		//echo "alert('preloadé: '+img_".$j."_".$i.".src);";  
    	}
    	if(is_dir($name.'/'.$file) && !in_array($file, array(".",".."))) {   
    		$j++;
            list_dir($name.'/'.$file,$j);   
        } 
    }   
    closedir($dir);
  }   
}

Donc voila, j'ai testé avec le alert et ca a l'air de fonctionner donc normalement mes images sont préloadés.

Mais, quand j'accède à ces images il y a un temps de chargement.
Le problème c'est que ces images ne sont pas "directement" dans la page, elle sont chargée dans un bloc en ajax qui récupère les images a charger avant de modifier la valeur d'un div...

En gros je me demande si le preload peut fonctionner avec cette méthode, je pensais que oui mais quand je charge mon div les images mettent du temps à charger...

quelqu'un aurait il une idée / solution ?

Merci.

Tiens ? j'ai toujours pensé que c'était bidon le préchargement d'une image en javascript, et jamais constaté que ça pouvait fonctionner... Quoi qu'il en soit, il me semble qu'il te faut spécifier les dimensions du fichier lorsque tu fais appel à new Image()

Sinon au pire tu les affiches normalement avec un display:none pour qu'elles se chargent sans être vues

Tiens ? j'ai toujours pensé que c'était bidon le préchargement d'une image en javascript, et jamais constaté que ça pouvait fonctionner...

C'est du préchargement qui continue en même temps que le chargement de la page.

ça fonctionne dans ces conditions :

- au chargement (et même un peu avant) de la page les images se téléchargent.

- mais la page s'affiche sans tenir compte de savoir si le téléchargement JS est terminé ou non.
Donc s'il y a beaucoup d'images d'un poids important en "préchargement", il faudra attendre un peu après l'affichage de la page avant que toutes les images soient chargées.

J'ai mis une petite fonction parfaitement fonctionnelle ici :
http://www.phpfrance.com/forums/voir_re ... php#243592

Par ailleurs, il y a moyen de savoir si les images ont terminé leur téléchargement ou pas avec
if (image.complete == true) et d'agir en conséquence.

Dans cet exemple il s'agit d'un diaporama JS avec fondu enchainé automatique et barre de navigation manuelle. Avant que la barre de navigation -qui peut donner accès directement à la dernière image- s'affiche, je dois contrôler que toutes les images sont chargées.

Ok merci.

Je ne veux pas charger toutes les images dans un block en display:none car en fait je me dis que le mieux finalement est de préloadé les images au moment de leur appel.
Mais avec le image.complete je vais peut etre réussir à faire ca, au moment de la création du bloc en ajax je passe les images et je n'affiche le bloc qu'une fois que les images sont chargées... ca peut etre bien...

Merci en tous cas, je teste ca et je reviens vers vous si jamais!

Edit : j'ai crée ce bout de code pour tenter de faire le preload... je veux bien votre avis car je trouve ça un peu tordu ce que j'ai fait...

. L'idée c que je récupère en ajax contenu_projet_selectionne et ce que je voulais c'est attendre que les images soit chargées avant d'afficher ce bloc... donc je le parse et je tente un preload... Merci d'avance pour vos commentaires !

Code : Tout sélectionner

		contenu_projet_selectionne = xhr.responseText;
		var last_src = contenu_projet_selectionne.lastIndexOf("src=\"",contenu_projet_selectionne.length);
		
		if(last_src!=-1)
		{
			c = contenu_projet_selectionne;
			position = 0;
			src_to_load = new Array();
			i=0;
			while(position != last_src+1)
					{
					position = c.indexOf("src=\"",position);
					//src_to_load.push(''+c.substring(position+5,c.indexOf("\"",position+6)));
					src_to_load[i] = new Image();
					src_to_load[i].src = ''+c.substring(position+5,c.indexOf("\"",position+6));
					position++;
					i++;
					}
			all_ok = false;
			unload = false;
			while(!all_ok)
			{
			unload=false;
				for(i=0;i<src_to_load.length;i++)
					{
					unload = src_to_load[i].complete;
					}
			all_ok = unload;
			}
		}
		document.getElementById("project_highlight_content").innerHTML = contenu_projet_selectionne;

Ca a l'air de fonctionner en local mais bon faudra que je teste sur serveur quand je pourrais. C'est juste pour savoir si la méthode est correcte ou loufoque....

Y'a me semble-t-il un pb dans la vérification du chargement des images. En fait si la dernière image est complète, unload = true (et donc all_ok = true) même si des images précédentes n'ont pas fini leur chargement, non ?

Oui, d'ailleurs c'est une question que je me posais : lors du chargement d'images, le fait il dans l'ordre et attend il d'avoir chargé l'image avant de passer à la suivante ou fait il ca dans l'ordre qu'il veut car il en commence plusieurs en meme temps ?

Sinon de toutes facons ce code marchait pas parce que le while tournait en instantané trop de fois donc ca ralentissait le tout... j'ai plutot défini un setInterval pour checker toutes les 300ms.

Autre question : quelle serait l'interval idéale ?

Merci pour vos réponses

Voici le code actuel :

Code : Tout sélectionner

		contenu_projet_selectionne = xhr.responseText;
		var last_src = contenu_projet_selectionne.lastIndexOf("src=\"",contenu_projet_selectionne.length);
		
		if(last_src!=-1)
		{
			c = contenu_projet_selectionne;
			position = 0;
			i=0;
			while(position != last_src+1)
					{
					position = c.indexOf("src=\"",position);
					src_to_load[i] = new Image();
					src_to_load[i].src = ''+c.substring(position+5,c.indexOf("\"",position+6));
					position++;
					i++;
					}
			
			all_ok = true;
         //1ere occurence pr eviter l'interval si c deja chargé
			for(i=0;i<src_to_load.length;i++)
				{
				if(!src_to_load[i].complete) all_ok=false;
				}
			if(!all_ok) wait = setInterval("check_complete()",500);
			else document.getElementById("project_highlight_content").innerHTML = contenu_projet_selectionne;
		}
		else document.getElementById("project_highlight_content").innerHTML = contenu_projet_selectionne;

Et la fonction check_complete :

Code : Tout sélectionner

function check_complete()
{
	all_ok = true;
	for(i=0;i<src_to_load.length;i++)
		{
		if(!src_to_load[i].complete) all_ok=false;
		}
	if(all_ok)
		{
		wait = clearInterval(wait);
		document.getElementById("project_highlight_content").innerHTML = contenu_projet_selectionne;
		}
}

Cela fonctionne pas mal... Je ne suis toujours pas sur d'utiliser une méthode censée... :d

C'est pas encore ça.
wait = setInterval("check_complete()",500) ne sera exécuté qu'en fonction de la dernière valeur de all_ok donc du chargement de la dernière image de ta boucle.

Mais bon tu es sur la bonne voix avec l'utilisation d'une méthode de temporisation pour la vérification du chargement. A ta place j'utiliserais quand même plutôt setTimeout() que setInterval()

Allez, encore un petit peu de boulot

Concernant le chargement, ma première remarque est bien pour te confirmer qu'il n'y a pas d'attente de la fin de téléchargement d'une image avant de commencer ou de terminer le téléchargement de la suivante.

Code : Tout sélectionner

   for(i=0;i<src_to_load.length;i++) 
      { 
      if(!src_to_load[i].complete) all_ok=false; 
      }

Cela ne mettra all_ok à false que si l'une des valeur est false non ? Ca ne prend pas en compte que la derniere.?

Code : Tout sélectionner
for(i=0;i<src_to_load.length;i++) { if(!src_to_load[i].complete) all_ok=false; }
Cela ne mettra all_ok à false que si l'une des valeur est false non ? Ca ne prend pas en compte que la derniere.?

Ah bah tu as raison, j'avais regardé trop vite et je fais un peu autrement mais ta méthode devrait fonctionner

Maintenant pour le délai essai de le réduire de moitié. Avec par exemple 250ms tu fais certainement la première boucle pour rien (il est peu probable que tes photos soient toutes préchargées en 250ms) mais ça te laisse une autre chance à 500 puis à 750 etc. Sinon ton script ne pourra être validé que toutes les 500ms. Enfin c'est à toi de voir.

Juste une remarque, il faut que tu sois absolument maitre de tes fichiers photos, si l'un d'entre eux a été effacé ta requête ne démarrera pas.

EDIT éventuellement tu pourrais au préalablement faire une vérification de fichier en php mais cela ralentira un peu le système.

Il me semble que tu devrais pouvoir simplifier ton code comme cela :

Code : Tout sélectionner

contenu_projet_selectionne = xhr.responseText;
		var last_src = contenu_projet_selectionne.lastIndexOf("src=\"",contenu_projet_selectionne.length);
		
		if(last_src!=-1)
		{
			c = contenu_projet_selectionne;
			position = 0;
			i=0;
			while(position != last_src+1)
					{
					position = c.indexOf("src=\"",position);
					src_to_load[i] = new Image();
					src_to_load[i].src = ''+c.substring(position+5,c.indexOf("\"",position+6));
					position++;
					i++;
					}
			
           check_complete();
		}
		else document.getElementById("project_highlight_content").innerHTML = contenu_projet_selectionne;

Et la fonction check_complete :

Code : Tout sélectionner

function check_complete()
{
	all_ok = true;
	for(i=0;i<src_to_load.length;i++)
		{
		if(!src_to_load[i].complete) all_ok=false;
		}
	if(all_ok)
		{
		document.getElementById("project_highlight_content").innerHTML = contenu_projet_selectionne;
		}
     else
     {
     setTimeout("check_complete()",250);
     }
}

Exact, merci !

Pour le laps de temps tu penses que 250ms est le temps "optimal" ?

Merci beaucoup pour ton aide en tous cas

Exact, merci !

Pour le laps de temps tu penses que 250ms est le temps "optimal" ?

Merci beaucoup pour ton aide en tous cas

C'est une valeur empirique que l'on retrouve dans pas mal de scripts (entre 150ms et 300ms). En fait dans l'absolu ça dépend du poids de tes photos et de la vitesse de téléchargement donc c'est un peu une moyenne sensée s'adapter approximativement à tout le monde. Tu peux faire des tests perso pour voir, mais normalement à environ 50ms près tu devrais trouver cette valeur.

Forum d'entraide PHPFrance

Preload ne fonctionne pas :(

Preload ne fonctionne pas :(