php / Ajax-meilleure pratique pour le pré-chargement des images
j'ai mis en place un script qui ressemble beaucoup à la fonction flickr photostream. Deux vignettes l'une à côté de l'autre, et lorsque vous cliquez sur les liens next ou prev, deux images s'affichent. Cool!
actuellement Quand la page charge elle charge les deux images. La première fois que nxt / prv est utilisé puis les deux images suivantes ou les deux précédentes sont chargés via ajax, avec l'id de la première image passée dans l'url et le HTML pour les deux nouvelles images retourné et affiché via ajax.
assez simple, mais il m'a amené à penser, sur une connexion lente, ou une lourde charge de serveur puis les deux images, bien que les vignettes relativement petites pourraient encore prendre un certain temps à charger, et les choses agréables avec des vitres coulissantes est le fait que les données cachées glisse dans rapidement et en douceur préférablement sans délai de chargement.
je me demandais donc, du point de vue de la performance et de la bonne pratique, quelle option était la meilleure, c'est ce que je peux penser pour l'instant, ouvert aux suggestions.
1, appelez chaque jeu d'images via JSON (c'est censé être rapide?)
2,charger toutes les images possibles dans un fichier json et tirer dans les détails de cette façon - bien que le navigateur devra encore charger l'image. De plus, il peut y avoir 4 images, d'autres fois il peut y en avoir jusqu'à 1000!
3, Charger 10 images via php dans un Json ou un autre fichier, et charger les 10 images dans le navigateur cachant les 8 qui ne sont pas sur l'exposition, et montrant toujours les deux du milieu. Le problème ici est que chaque fois que quelqu'un clique, le fichier doit recharger la première et la dernière image, ce qui prend encore du temps, bien que je suppose que les images du milieu auront tous été mis en cache via le navigateur à ce jour. Mais il y a quand même un temps de chargement.
4, est-il possible d'avoir une image json avec tous les détails de l'image (indépendamment des nombres) et d'utiliser le no 3 ci-dessus pour charger 10 de ces images, est il est possible d'utiliser ajax pour lire seulement 10 lignes et garder un pointeur du dernier qu'il a lu, de sorte que le fichier json peut être chargé rapidement, rafraîchir court et les images de chaque côté sont mis en cache via le navigateur!!
J'espère que c'est clair, des suggestions sur la façon dont vous allez gérer ça?
4 réponses
pour précharger une image à partir de Javascript, vous n'avez pas besoin de faire quoi que ce soit qui ressemble à AJAX ou JSON. Tout ce dont vous avez besoin est ceci:
var img = new Image();
img.src = "http://example.com/new/image.jpg";
le navigateur chargera volontiers l'image en arrière-plan, même si elle n'est affichée nulle part. Ensuite, lorsque vous mettez à jour le champ src d'une autre étiquette d'image (affichée), le navigateur affichera immédiatement la partie de l'image qu'il a déjà chargée (avec un peu de chance tout).
aller chercher JSON Via Ajax vous ralentira.
il est préférable d'utiliser JSON en ligne et de générer Javascript.
<?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>
dans le cas où vous voulez concurremment 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 cache sont tels que le navigateur utilisera les ressources sur la prochaine demande. Dans l'exemple suivant, je charge jusqu'à quatre ressources simultanément.
<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();">
pourquoi ne pas utiliser du texte et remplacer le texte par un code image (fonctionne en php vraiment agréable avec ajax jusqu'à 500 images et plus)?