Lazy loading des images avec jQuery

Une caractéristique très importante d'un site web est certainement la vitesse de chargement des pages. Malgré un site lent qui prend trop de temps pour nous montrer ce que nous voulons, en fait, la plupart des utilisateurs ferme la page en passant à un autre site ou un concurrent. L'Internet n'est pas un outil pour les gens du patient ;-)

La technique de chargement à la demande (traduit en "lazy loading") des images, c'est précisément pour éviter de longues attentes et inutile dans une page web. Cette technique de programmation n'est pas, en fait, renvoie à des images, mais couvre toutes les ressources "inutiles" lors de son chargement, riorse qui, bien sûr, récupéré "sur demande" quand il ya un besoin.

Nous ferons face au discours des images telles qu'elles sont essentiellement les plus lourdes partie d'une page Web. L'utilisateur démarre une page n'est pas nécessairement l'ensemble sera de visualiser les images, peut-être parce qu'ils sont cachés ou simplement parce qu'ils placé au fond ou dans une zone éloignée de l'endroit où l'utilisateur souhaite accéder à l'information.
De telles situations se produisent principalement pour des pages très grand, comme le sont ceux du blog (qui, en accusation de nombreux commentaires, peut être très long). Dans de telles circonstances que cela n'a aucun sens pour charger toutes les images au démarrage, en particulier ceux situés dans le bas car il ne pourrait jamais être vus!

Pour mettre en œuvre la technique de chargement à la demande peut être mise en œuvre de différentes manières.
La plus évidente qui vient à l'esprit est de supprimer les images à la volée depuis le DOM en utilisant JavaScript. Mais ce serait tout aussi erroné, car la façon la plupart des navigateurs n'ont pas encore transmis la demande de l'image et vous obtiendrez le plein effet désiré.
Une bonne technique, a souligné dans l'article de Paul Hammond Accélérez votre site avec du contenu différée est, au contraire, d'utiliser des attributs personnalisés en HTML5. Voyons comment.

• <<
• 1
• 2
• 3
• >>