Faire en sorte que les images se chargent lorsqu'elles entrent dans la section visible du navigateur ?

Question

Je naviguais sur le web et j'ai vu quelque chose que je n'avais jamais vu auparavant. sur ce site : http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/

Lorsque vous naviguez vers le bas de la page, les images ne se chargent que lorsqu'elles se trouvent dans la partie visible du navigateur. Je n'ai jamais vu cela auparavant et je me demandais si quelqu'un d'autre l'avait vu et comment on pouvait le faire exactement.

Je suppose qu'il s'agit d'une sorte de plugin Wordpress (c'est ce qu'il utilise), mais je n'en suis pas sûr. S'agit-il de javascript ? Est-ce qu'ils se chargent réellement au chargement de la page mais deviennent visibles plus tard pour un effet "snazzy" ou est-ce que c'est réellement utile pour accélérer le temps de chargement de la page ?

Answer 1

"wp-content/plugins/jquery-image-lazy-loading"

Lazy loader est une pl de jQuery. en JavaScript. Il retarde le chargement des des images dans les pages web (longues). Images en dehors de la fenêtre de visualisation (partie visible de la page web) ne seront pas chargées avant d'être utilisées. page web) ne seront pas chargées avant que l'utilisateur ne soit chargé avant que l'utilisateur ne défile jusqu'à lui. C'est le contraire de préchargement d'image.

Utilisation de lazy load sur des pages web longues contenant de nombreuses images de grande taille la page se charge plus rapidement. Le navigateur sera en mode état prêt après le chargement des visibles. [ ] à réduire la charge du serveur.

http://www.appelsiini.net/projects/lazyload

Il semble donc qu'il passe en revue chaque image spécifiée ou dans le contexte d'un élément et remplace le src par un gif de remplacement avant le chargement complet des images, enregistre l'URI d'origine et, lorsque l'image est "visible", remplace le placeholder par la véritable image.

Answer 2

LazyLoad n'est plus disponible selon le site web. Apparemment, le code ne fonctionne plus sur les nouveaux navigateurs et l'auteur n'a pas le temps de le mettre à jour.

Le plug-in "Apparaître" fonctionne bien pour moi.

http://plugins.jquery.com/appear/

Il permet de spécifier une fonction de rappel pour un élément. La fonction de rappel est appelée lorsque l'élément apparaît à l'écran. D'après le site :

$('#foo').appear(function() {
  $(this).text('Hello world');
});

Answer 3

Si vous regardez la source de la page que vous avez référencée, elle contient ce bout de code :

jQuery(document).ready(function($){
  jQuery(".SC img").lazyload({
    effect:"fadeIn",
    placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
  });
});

Je soupçonne que c'est ainsi qu'ils obtiennent l'effet escompté. Il utilise le plugin jQuery LazyLoad, qui peut être trouvé ici :

http://www.appelsiini.net/projects/lazyload

Answer 4

Comme l'a souligné Sanjay, le plugin jQuery LazyLoad d'Applesiini ne fonctionne plus. Voici un autre plugin jQuery que j'ai trouvé. Il s'agit d'une option supplémentaire en plus de jQuery Appear .

http://plugins.jquery.com/project/LazyLoadOnScroll

http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/