Integrating Lazy Load into Blogger

Lazy Load ImageLazy 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 : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0pLOXif-Y5VeCZxmfvEplVugqvUSV4OxporeE5v5LYSjhuQNQaHpyYqCH3uG-dZxVrEwNdQQxrGPqoRJBpifBlDkw1zzfz8mWK_286cD8-34zN1pPLi6oEwcJ4oKPI39kpRYS51wHX9r/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 : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0pLOXif-Y5VeCZxmfvEplVugqvUSV4OxporeE5v5LYSjhuQNQaHpyYqCH3uG-dZxVrEwNdQQxrGPqoRJBpifBlDkw1zzfz8mWK_286cD8-34zN1pPLi6oEwcJ4oKPI39kpRYS51wHX9r/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 :

You might not see much difference in the Page Size (About 40 Kb) but the Page Load Time has reduced by more than Half



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 !


Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
psydex said...

my featured content slider stopped working when i put Lazy Load's script.
B-sides it looks stiff - i've seen way slicker alternatives of Lazy Load which fades the images when loads them (unfortunately i don't remember the name of it)

@psydex
Firstly make sure you don't include jQuery library again as it is already present in your blog

if the problem persist then add the following code before the LazyLoad code

<script type='text/javascript'>
jQuery.noConflict();
</script>

psydex said...

@Prayag Verma
Ugh , i always forgot to make sure not to double jQuery library. Thanks mate - that fixed the problem :)

Can you tell me what's the name of a similar script (i've seen it elsewhere) which does the same job but fades-in the images?

@psydex

Here is a script that does the same thing

http://jqueryfordesigners.com/image-loading/

Thanks it really worked ,reduced my page load time from 4.62s to 3.84s

Unknown said...

Prayag...
I enjoy your blog so much. I have given you a lovely blog award. Please pick it up at http://takingbackmylifemakingitmyown.blogspot.com/2011/10/day-145-spook-ta-boo-lar-day.html

Enjoy!!
Carla

Really wondering, as a lay man, amazed to see a technical wonder.Thanking you.

Anonymous said...

Not Working T_T

@Danialde4
Please provide the link where you have implemented it

@Prayag
I have try at your link but seen not work. This is the your URL
http://www.demo.stylifyyourblog.com/2011/10/lazy-load-enabled.html

@Danialde4
It is working, if you observe the vertical scrollbar, you will see it is larger when the page loads and becomes smaller as you scroll down and about the page load speeds, see these images . There might have been problems with Share button though that were present before

[im]http://3.bp.blogspot.com/-rLkCXU1WOI0/TtZdrOKhnjI/AAAAAAAABi0/XZFK5MuAPJQ/s1600/ena.PNG[/im]


[im]http://2.bp.blogspot.com/-8iteaiIMmlc/TtZdrzNnvdI/AAAAAAAABi4/G4L-773qN10/s1600/dis.PNG[/im]

Anonymous said...

@prayang
It's working on my blog ^_^
sorry for my mistake.

why? in my blog not work?

@Ф дфѕдғфдғ Ф
I checked your blog, couldn't find the LazyLoad script,please give a URL where you have implemented this script

Anonymous said...

@Prayag Verma
LazyLoad now work but my slide (show/hide comment) didn't work. why?
check my blog: Click Here

do you have a solution?

@Ф дфѕдғфдғ Ф
There is a conflict between the jQuery plugins ,try using the following code just after the javascript for the show/hide function:

<script type='text/javascript'>
jQuery.noConflict();
</script>

P.S. Your thread system is just awesome , but its not working on my older post like this one: Ticker

Anonymous said...

@Prayag Verma i was tried it before but still not work!!!

@Ф дфѕдғфдғ Ф
When you had the LazyLoad script, there were 2 jQuery libraries, maybe 2 libraries were conflicting , make sure you include only one jQuery library

Anonymous said...

@Prayag Verma okey i'll tray

Anonymous said...

@Prayag Verma
Still not working

This comment has been removed by the author.
Amika said...

I want the fade-in effect just like this blog

http://butdoesitfloat.com/

Any help??

@Test test Change Line 4 & 5 of the above code ,from

$(function() {
$(".post-outer img").lazyload({placeholder : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/s1600/greys.gif"});
});


to something like this:

$(function() {
$(".post-outer img").lazyload({placeholder : "http://2.bp.blogspot.com/-7mu1o035Ssk/TqmCSGtOLaI/AAAAAAAABWs/RAXNJm5NDPk/s1600/greys.gif" , effect : "fadeIn" });
});

Nice tricks thanks.

Hey Prayag,

Thanks for this Tutorial, It works perfectly.. I have a question... Can i include the Jquery plugin (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>) in Head tag... So that i can use it for other JQuery enabled widgets without using the code again and again?? Thanks in Advance...

Yes surely Em Ji Madhu , but the best would be to include all the code related to the other jQuery plugins just near the /body tag . The reason for it is that including scripts in the head will slow down the loading of your site

Oh okay... Then i will do as you said... Thanks for the Help again Prayag...

One more doubt... recently i was trying to place recent post widget... But no widget is showing in my blog... i tried Linkwithin, nrelate (as you you stated in this blog) and other widgets too... But none is working for me... i dont know why... i tried to place it below both codes (data:body/) and (data:footerline-1)... but nothing is working on my blog... :-(

Lazy Load Enable>>> Page load time: 1.87s

Lazy Load Disable>>> Page load time: 1.72s

why ??

Anonymous said...

Hi Prayag Verma,

http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js is not accessible for last few months.

Can you please give us some other link. or the script itself. Thank you

Xewin

Toon said...

Any ideas how to get this working on http://www.graphic-design-blog.com/