Accélérer le chargement de 30 à 40 images chargées dynamiquement sur chaque page vue

Question

J'ai une communauté sociale avec beaucoup de trafic. Dans la colonne de droite de la mise en page du site, nous avons obtenu une "liste en ligne" qui imprime une image en miniature de 40x40px d'amis, de personnes dans votre région, etc. 30-40 images au total. Juste avant le chargement de la colonne de droite, il se bloque lorsque toutes ces images sont chargées. J'ai besoin d'une solution plus rapide compatible avec IE6.

Est-il possible de charger des images par ajax après le chargement de la page, utiliser une sorte de gfx en ligne (supporté par IE6) ou d'autres méthodes?

Answer 1

Le chargement des images via AJAX fonctionnera. Vous pouvez facilement le faire en utilisant jQuery par exemple. Définissez un div pour chaque image que vous souhaitez afficher. Peut-être que vous pourriez afficher une image "Chargement .." ou quelque chose comme ça à la place de l'image réelle, lorsque la page est initialement affichée.

Il existe de nombreuses options avec jQuery. Il y a un plug-in pour lazy loading, vous pouvez preload images et vous pouvez facilement ajouter des effets lorsque l'image est affichée.

Answer 2

Cette zone de page est chargée de manière asynchrone en arrière-plan.

Answer 3

Oui, vous pouvez différer le chargement des images, bien que vous souhaitiez inclure la version HTML normale dans une balise <noscript> afin que les utilisateurs/araignées plus simples puissent voir votre page.

Une autre technique consiste à charger les images à partir d'un certain nombre de sous-domaines, puisque les navigateurs n'ouvrent généralement qu'un petit nombre de connexions à chaque domaine. Par exemple, si votre site est sur foo.com, chargez vos images statiques de a.foo.com, b.foo.com et c.foo.com

Answer 4

Je considérerais aussi ne pas montrer 30-40 images dynamiques depuis ni le serveur ni le client ne peuvent efficacement mettre en cache ces images.

Answer 5

Si votre problème est lié à redimensionner ces images côté serveur sur la course, vous pouvez stocker les vignettes après les redimensionner une fois, puis ne servent que les vignettes sur les charges suivantes.

40 petites images ne devraient poser aucun problème pour la plupart des scripts. 40 images en taille réelle obtenir redimensionné peut être beaucoup de charge.

pseudocode:

1. utilisateur demande une vérification d'image
2. si vignette de cette image existe
3. sinon, créer une vignette et de le servir
4. si oui, servir la vignette

Vous pouvez obtenir le serveur pour mettre en cache ces images en utilisant apache réécrire pour acheminer certains .jpg | .png | etc demandes à votre script de redimensionnement. D'autres serveurs ont sans aucun doute des fonctionnalités similaires.