Galerie d'images, préchargement vs AJAX

Question

Hey j'essaye de faire une galerie d'image mais je suis bloqué à si je devrais charger toutes les images tandis que la page charge ou obtenir ajax pour demander de nouvelles images avant qu'elles soient montrées dans la galerie?

L'exemple ci-dessous montre que je visualise la deuxième image et que 2 images cachées sont chargées alors que l'image 5 est en cours de chargement via une requête ajax. Je pensais que si je garde deux images chargées entre l'image en cours de visualisation et les utilisateurs ajax chargement d'images ne devraient pas avoir à regarder une charge d'image

Image Gallery (Viewing Single Image) 
    1  2  3  4  5 
+-------+-------+-------+-------+-------+ 
|  |Loaded |  | * |Loading| 
|Loaded | On |Loaded |Loaded | AJAX | 
|Hidden | Show |Hidden |Hidden |Request| 
+-------+-------+-------+-------+-------+ 

Je nai ajax tombereau localhost donc ne sais pas ce genre de performance qu'il a comparé à simplement charger les images avec la page et les cacher.

Answer 1

Vous pouvez généralement compter sur le cache des navigateurs pour charger les images rapidement. Une façon très fiable que j'ai trouvé pour ce faire est la suivante:

$("<img>").attr('src', imageSrc); 

Cela crée un élément d'image, ne rajoutez pas au DOM, mais le navigateur toujours télécharger l'image et en cache . Avec cela, vous pouvez ajouter soit l'élément d'image que vous avez créé ou utiliser un nouvel élément d'image avec cette source d'image et il ne devrait pas y avoir de délai de chargement.

Je ne suis pas sûr de ce que vous voulez dire par chargement avec ajax. Comme une requête ajax n'est pas différente de toute autre requête, il ne devrait pas y avoir de différence de performance entre l'utilisation de "ajax" et le "chargement" des images. Il peut y avoir une surcharge sur le serveur si vous utilisez un script pour charger l'image d'une manière ou d'une autre.

Answer 2

Je l'ai déjà cette situation dans laquelle j'ai également pris deux échantillons trouver la solution

Fondamentalement pour l'image de base [image miniature] de chargement, vous pouvez utiliser la charge paresseuse pour la page

et pour le chargement l'image grande ou principale vous pouvez charger l'image de la vignette dans cela et après vous pouvez écrire le code pour charger la grande image dans celui-ci.

$('#GalleryImage img.mainImage').load(function() { 
    $(this).attr('src',$(this).attr('src').replace('thumb','large')); 
}); 

mai cela vous aidera

Answer 3

En fin de compte, le chargement au moment de l'analyse syntaxique HTML, en utilisant javascript/jquery préchargement ou en utilisant prendre ajax en même temps, surtout si l'image est grande (si ce n'était pas, vous ne demanderiez pas?).

Le système doit ouvrir une connexion, effectuer une requête GET pour le fichier et le fichier est transmis sur le réseau. Si elle est mise en cache, elle n'est pas retransmise. Le transfert réseau est le goulot d'étranglement, et les différentes méthodes de chargement ne le modifient pas.

Vous influencer les temps d'attente de votre utilisateur de deux façons:

• Réduire la taille de vos médias, par exemple utiliser les miniatures, être intelligent avec la compression, réutiliser les fichiers volumineux pour exploiter la mise en cache ...

• Le temps de charger votre image avec soin, c'est ce que fait le préchargement d'image (avec ou sans AJAX, c'est la même chose). Il est probable qu'il est impossible de savoir exactement quand commencer à charger une image pour que l'utilisateur n'attende pas. Charger trois images à l'avance, comme vous le proposez, me semble bien. Les utilisateurs peuvent, occasionnellement, attendre, mais plus c'est trop.

Pour un diaporama, vous pourriez avoir un tableau de rappeler que les images sont déchargées, comme une miniature, ou complètement chargée, qui vous permettra de ne pas faire des demandes répétées inutiles.

Je ne vous ai pas vraiment donné une balle magique ... Il n'y en a pas, mais j'espère que cela vous aidera.