Blogger에서 지연로드

Question

블로거 블로그에 지연로드를 구현하려고하지만 일부 문제가 있습니다. 문제의 게으른 부하 플러그인이 하나입니다 : 문서에 따라서 http://www.appelsiini.net/projects/lazyload

, 그것은 이미지가 게으른로드로 말한다해야하는 다음과 같은 HTML 코드 형식 :이 경우와는

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

이므로 그것은 기본적으로 "grey.gif"spaceholder와 함께, 블로거 출력 최초의 형식으로 이미지를 html로 만드는 것이 가능하다,

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

내 질문은 : 블로거 포스트는 블로거 엔진은 다음과 같은 형식으로 이미지를 출력 모든 이미지에 대한 이미지 src 및 e lazyloader가 실제로 작동하도록 올바른 이미지 URL을 갖는 "data-original"속성?

Answer 1

:-) 어떤 도움에 미리

덕분에 당신은, HTML보기로 전환 한 후 게으른로드 스크립트의 요구 사항에 따라 각 img 태그를 수정할 수 있습니다.

Answer 2

당신은

<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>

당신은 자리 표시 자와 같은 다른 이미지 링크로 http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif을 대체 할 수있는 모든이 당신이 블로거의 블로그를 위해 특별히 만든 아래 게으른로드 스크립트를 사용할 수 있습니다 수행 할 필요가 없습니다.

소스 링크 : 2000 개 + 이미지를 조금 비현실적 http://101helper.blogspot.com/2014/08/how-to-speed-up-your-blogger-blog.html