Few Days Before i used it. i saw a little time to load image.This is a Magic.So next thing we are need to doing.Before you start note it.
Install lazy plugin on your blogs follow me.I guide you step by step.
Note The Step.
- Go to Blogger Dashboard » Template
- Backup your Blogger Template before making any changes
- Click on Edit HTML
- Click anywhere in Edit template section
- Press Ctrl + F and search the code shown below
If You are not Find The code you.Just Copy the code and pest to Above/Before </head> tag [use Ctrl+F to find the code]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| <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: "https://i22.servimg.com/u/f22/15/42/72/40/grey10.gif" ,effect: "fadeIn" ,threshold: "-50" ; })})//]]></script> |
hi
ReplyDelete