2012-05-06 2 views
1

J'essaie d'implémenter un chargement paresseux sur un blog de blogueur, mais je rencontre des problèmes. Le plugin charge paresseux en question est celle-ci: http://www.appelsiini.net/projects/lazyloadLazy Load sur Blogger

Ainsi, dans la documentation, il est dit que les images soient paresseux chargé si le format de code html suivant:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 

Comme il est le cas messages blogueur, le moteur blogueur délivre les images dans le format suivant:

<img class="lazy" src="img/myimage.png" width="640" heigh="480"> 

Ma question est, est-il possible de faire blogger sortie le html image avec le premier format, avec le spaceholder « de grey.gif » par défaut image src pour toutes les images, et th L'attribut "data-original" possède-t-il l'URL d'image appropriée pour que le lazyloader fonctionne réellement?

merci à l'avance pour toute aide :-)

Répondre

1

Vous pouvez basculer en mode HTML, puis modifier chaque balise img selon l'exigence du script de chargement paresseux.

+0

qui serait un peu irréaliste pour images 2000+, ne serait-il? Je cherche une solution scriptée à ce problème. Merci pour la suggestion quand même :-) – Hirvesh

+0

ya, tu as raison. . Mais comme le générateur de contenu HTML est blogueur, il n'est pas possible de l'intercepter. J'avais besoin de la même fonctionnalité dans wordpress. Donc, dans wordpress, j'ai créé un shortcode pour de telles images. Quoi qu'il en soit, pour blogger, vous pouvez utiliser search & replace pour remplacer. Si elle génère , vous pouvez rechercher [ rax

+0

merci pour toute l'aide :-) – Hirvesh

-1

Vous n'avez pas besoin de faire tout cela, vous pouvez utiliser le script de chargement ci-dessous paresseux créé spécialement pour les blogs Blogger

<script type='text/javascript'>//<![CDATA[ (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

Vous pouvez remplacer http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif avec d'autres lien d'image comme un espace réservé.

lien Source:http://101helper.blogspot.com/2014/08/how-to-speed-up-your-blogger-blog.html