php / Ajax - Meilleure pratique pour le préchargement d'images

Question

J'ai mis au point un script qui ressemble beaucoup à la fonctionnalité de flux de photos flickr. Deux miniatures côte à côte et lorsque vous cliquez sur le lien suivant ou précédent, les deux images suivantes (ou précédentes) s'affichent. Cool!

Actuellement, lorsque la page est chargée, les deux images sont chargées. La première fois que nxt / prv est utilisé, les deux images suivantes ou les deux précédentes sont chargées via ajax, l'id de la première image étant passé dans l'URL et le code HTML des deux nouvelles images renvoyées et affichées via ajax.

assez simple, mais cela m’a amené à penser que, sur une connexion lente ou sur une charge de serveur lourde, les deux images, bien que des vignettes relativement petites puissent encore prendre un certain temps à se charger, et le bon côté des volets coulissants est le fait que les données cachées glissent rapidement et de préférence de préférence sans délai de chargement.

Du point de vue des performances et des bonnes pratiques, je me demandais quelle option était la meilleure. C’est ce à quoi je peux penser pour le moment, ouverte aux suggestions.

1, appelez chaque ensemble d'images via JSON (son supposé être rapide?)

2, chargez toutes les images possibles dans un fichier JSON et affichez les détails de cette façon - bien que le navigateur doive toujours charger l'image. De plus, parfois, il peut y avoir 4 images, d'autres fois, il peut y en avoir jusqu'à 1000!

3, chargez 10 images via php dans un JSON ou un autre fichier, puis chargez les 10 images dans le navigateur en masquant les 8 images non affichées et en affichant toujours les deux du milieu. Le problème ici est que chaque fois que quelqu'un clique, le fichier doit recharger les première et dernière images, ce qui prend encore du temps, même si je suppose que les images du milieu auront toutes été mises en cache via le navigateur. Mais il y a toujours un temps de chargement.

4, Est-il possible d'avoir une image json avec tous les détails de l'image (sans tenir compte des nombres) et d'utiliser le numéro 3 ci-dessus pour charger 10 de ces images, est-il possible d'utiliser un ajax pour seulement lire 10 lignes et conserver un pointeur le dernier fichier lu, afin que le fichier json puisse être chargé rapidement, actualisé brièvement et que les images des deux côtés soient mises en cache via le navigateur!

J'espère que c'est clair, des suggestions sur la manière de gérer cela?

Answer 1

Pour précharger une image à partir de Javascript, vous n'avez rien à faire qui ressemble à AJAX ou JSON. Voici ce dont vous avez besoin:

var img = new Image();
img.src = "http://example.com/new/image.jpg";

Le navigateur chargera avec plaisir l'image en arrière-plan, même si elle ne s'affiche nulle part. Ensuite, lorsque vous mettrez à jour le champ src d'une autre balise d'image (affichée), le navigateur affichera immédiatement la partie de l'image déjà chargée (espérons-le tout).

Answer 2

La récupération de JSON via Ajax ne fera que vous ralentir.

Vous feriez mieux d’utiliser JSON en ligne et le Javascript généré.

 <?php 
       $images = array( "foo.jpg","bar.jpg" ); 
 ?>
 <script type="text/javascript">
   jQuery(function($){
       var images = ( <?php echo json_encode($images); ?> ); 
       /* Creating A Hidden box to preload the images into */
       var imgbox = document.createElement("div"); 
       $(imgbox).css({display: 'none'});
       /* Possible Alternative trick */
       /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */
       $('body').append(imgbox);

       $.each( images , function( ind, item ) 
       {
          #Injecting images into the bottom hidden div. 
          var img = document.createElement("img"); 
          $(img).src("/some/prefix/" + item ); 
          $(imgbox).append(img);
       });
    }); 
 </script>

Answer 3

Dans le cas où vous souhaitez simultanément précharger un plus grand nombre de ressources, un petit ajax peut résoudre le problème pour vous. Assurez-vous simplement que les en-têtes de mise en cache sont tels que le navigateur utilisera les ressources lors de la prochaine requête. Dans l'exemple suivant, je charge simultanément jusqu'à quatre ressources.

<script>
var urls = [
  "a.png",
  "b.png",
  "c.png",
  "d.png",
  "e.png",
  "f.png"
];

var currentStep = 0;
function loadResources()
{
  if(currentStep<urls.length){
  var url = urls[currentStep];
  var req = GetXmlHttpObject();
  update('loading ' + url);
  req.open("GET", url, true);
  req.onreadystatechange = getUpdateState(req, url);
  req.send(null);
} else {
  window.location = 'done.htm';
}
}

function getUpdateState(req, url) {
  return function() {
    var state = req.readyState;
    if (state != 4) { return; }
    req = null;
    setTimeout('loadResources()', 0);
  }
}
</script>

<!-- This will queue up to four concurrent requests.  Modern browsers will request up to eight images at time  -->
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">

Answer 4

Pourquoi ne pas utiliser du texte et remplacer le texte par un code d'image (fonctionne vraiment bien en php avec une valeur allant jusqu'à 500 images et plus)?