Script Ajax pour afficher instantanément des images

Ce que nous voulons c'est présenter une galerie d'images ou photos sous forme de vignettes et lorsque la souris passe sur une vignette, l'image surgisse en taille normale.

L'intérêt d'utiliser Ajax est dans le mode asynchrone propre à l'objet XMLHttpRequest, dont nous tirerons profit pour charger les images alors que la page est elle déja chargée, et pendant que l'utilisateur lit la page, sans aucun délai d'attente ni au chargement de la page, ni pour afficher une image...

Le code JavaScript de chargement asynchrone est simple, on appelle la fonction suivante avec le nom des fichiers des images en taille normale:

function createXHR() 
{
  var request = false;
  try { request = new ActiveXObject('Msxml2.XMLHTTP'); }
  catch (err2) { 
    try { request = new ActiveXObject('Microsoft.XMLHTTP'); }
    catch (err3) {
    try { request = new XMLHttpRequest(); }
    catch (err1) {
      request = false;
   }
  }
 }
 return request;
}

function preloading(url)
{
  var xhr=createXHR();   
  xhr.onreadystatechange=function()
  { 
    if(xhr.readyState == 4)
    {
      var content = xhr.responseText;
      var i = new Image();
      i.src = content;
    } 
  }; 
  xhr.open("GET", url , true);
  xhr.send(null); 
} 

La démonstration

Dans cette démo, on place une galerie de vignettes à gauche, dans un div dont l'identifieur est "leftview" et on ménage au centre de la page un espace d'affichage dont le nom est "bigview".

A chaque vignette est associée une méthode HTML "onmouseover", qui déclenche un évènement lorsque la souris passe sur la vignette.
Si l'on préfére afficher l'image seulement quand l'utilisateur clique sur la vignette, on utiliserait alors la fonction "onclick".
La valeur associée est "enlarge(this)" qui appelle la fonction JavaScript "enlarge" avec pour paramètre "this", qui représente la balise img courante.

La fonction enlarge construit une balise img à placer dans l'espace d'affichage central. Elle suppose que les vignettes ont le préfixe "thumb-" et les images en taille normale le préfixe "big-". Il suffit alors de changer le préfixe pour connaître le nom de l'image pour une vignette donnée.

function enlarge(element)
{
  var name = element.src;
  name = localFilename(name);// supprimer le chemin
  name = name.slice(6);   // enlever la partie "thumb-" 
  name = "images/big-" + name;  // remettre le chemin et ajouter le préfixe "big-" 

  // construire une chaîne pour afficher l'image
  var str = " < img='" + name + "'>";
   document.getElementById("bigview").innerHTML = str;
}

Compatibilité: Firefox, Chrome, IE9.

Code HTML

<div id="views">
<div id="leftview">
  <p><img src="images/thumb-girl.gif" width="199" height="152" onmouseover="enlarge(this)"> </p>
  <p><img src="images/thumb-thinking.gif" width="198" height="173" onmouseover="enlarge(this)"></p>
  <p><img src="images/thumb-sand.gif" width="200" height="196" onmouseover="enlarge(this)"></p>
  <p><img src="images/thumb-sea.gif" width="200" height="348" onmouseover="enlarge(this)"></p>
  </div>
<div id="bigview" onclick="alert(this);">
</div>
</div>

Code CSS

#views
{
  position:relative;
  height:932px;
  min-heigth:932px;
  margin:16px;
  overflow:auto;
}

#leftview
{
  position:absolute;
  top:0px;
}

#bigview
{
  position:absolute;
  top:0px;
  left: 300px;	
  background-color:while;
  width:400px;
  height:400px;
  min-height:400px;	
}

Code JavaScript complet

Pré-chargement:

<script src="ajax.js" type="text/javascript"></script>
<script src="gallery.js" type="text/javascript"></script>
<script language="JavaScript">
preloading("images/big-girl.gif");
preloading("images/big-thinking.gif");
preloading("images/big-sea.gif");
preloading("images/big-sand.gif");
</script>

Pour afficher :

<script>
function localFilename(url)    // removing path
{
  var x = url.lastIndexOf("/");
  url = url.slice(x + 1);
  return url;		
}

// images are loaded asynchronously with no delay

function preloading(url)
{
  var xhr=createXHR();   
  xhr.onreadystatechange=function()
  { 
    if(xhr.readyState == 4)
    {
      var content = xhr.responseText;
      var i = new Image();
      i.src = content;
    } 
  }; 

  xhr.open("GET", url , true);
  xhr.send(null); 
} 

function enlarge(element)
{
  var name = element.src;
	
  name = localFilename(name);
  name = name.slice(6);   // remove the "thumb-" part
  name = "images/big-" + name;  // restore path and add the new "big-" prefix
		
  // building a string to display the image
	
  var str = "<img src='" + name + "' >";
  document.getElementById("bigview").innerHTML = str;
}
</script>

Télécharger la démonstration