27 Oct 2011
Integrating Lazy Load into Blogger
Lazy Load is a jQuery plugin which only loads Images seeable in the viewport (visible part of web page) thereby enhancing the Page Load time. The images which are out the initial visible region of the screen are loaded as the users scrolls through them. A really useful plugin for Image intensive Blog's.See Demo
How to add this into your Blog :
1. Login to your Blogger Account
2. Go to Design > Edit HTML ( For New Blogger Interface Go to Templates > Edit HTML )
3. Search for </body> tag and paste the following Code :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({placeholder : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/s1600/greys.gif"});
});
</script>
In case you experience blank Images in your Sidebar then try out this code :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".post-outer img").lazyload({placeholder : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/s1600/greys.gif"});
});
</script>
What the following code does is it limits the scope of Lazy Load to the Post Area excluding the Sidebar.
4. Save the Template and enjoy.
Skeptical about this Plugins Effects ,well check out the Results as measured by Gtmetrix.com
With Lazy Load Disabled :
With Lazy Load Enabled :
If you still don't Beileve it try it for yourself. Just go to Gtmetrix.com
Lazy Load Disabled URL: http://www.demo.stylifyyourblog.com/2011/10/lazy-load-disabled.html
Lazy Load Enabled URL: http://www.demo.stylifyyourblog.com/2011/10/lazy-load-enabled.html
Have a Opinion ,Share It !
Til next time,
Prayag Verma
at 16:55
