Les images sont-elles chargées 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 se chargent uniquement quand ils sont dans la partie visible du navigateur. Je n'ai jamais vu cela auparavant et je me demandais si quelqu'un d'autre a et comment exactement on le ferait.

Je suppose que c'est une sorte de plugin Wordpress (c'est ce qu'il utilise) mais je ne suis pas sûr. Est-ce que c'est javascript? Sont-ils en train de charger sur le chargement de la page, mais deviennent visibles plus tard pour un effet "snazzy" ou est-ce réellement utile pour des temps de chargement de la page plus rapide?

Answer 1

LazyLoad n'est plus disponible en ligne. 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 "look" fonctionne bien pour moi.

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

Il vous 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 dans la vue. Sur le site:

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

Answer 2

Si vous regardez la source de la page que vous avez mentionné, il contient ce morceau 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 pense que la façon dont est qu'ils ont accompli l'effet. Il utilise le plugin LazyLoad jQuery, qui se trouve ici:

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

Answer 3

"wp-content/plugins/jquery-image-chargement paresseux"

loader Lazy est un plugin jQuery écrit en JavaScript. Il retarde le chargement des images dans les pages Web (longues). Les images en dehors de la fenêtre d'affichage (partie visible de la page Web ) ne seront pas chargées avant que l'utilisateur n'y défile. Ceci est l'opposé de préchargement d'image. L'utilisation de la charge paresseuse sur les longues pages Web contenant de nombreuses grandes images accélère le chargement de la page . Le navigateur sera en état prêt après le chargement des images visibles. Dans certains cas, il peut également aider à réduire la charge du serveur.

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

Il semble donc qu'il passe par chaque image spécifiée ou à l'intérieur du contexte d'un élément et remplace le src avec un gif espace réservé avant que les images entièrement de charge, enregistre l'URI d'origine et lorsque l'image est "visible" il remplace l'espace réservé par l'image réelle.

Answer 4

Comme Sanjay a fait remarquer, le plugin jQuery LazyLoad de Applesiini ne fonctionne plus. Voici un autre plugin jQuery que j'ai trouvé. Juste une autre option en plus de jQuery apparaissent.

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

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