Lazy Load: Image Loader Plugin for jQuery

31. October 2010 16:24 by mduman in BlogEngine, Design  //  Tags: , , ,   //   Comments

While I was visiting http://blog.prabir.me/, I noticed that images on his posts load when I scroll down the page. I did not know its name but I did know that I could integrate it into my blog. After tweeting with him, correct term was “Lazy Load”, although I first used (JIT) Just-in-Time loading for images Smile.

Here are the related links and a guide to implement it into your BlogEngine.NET blog. Off course you can implement it into other websites or blogs, but in this post I will mention how our community can benefit from this technique.

References:

Lazy Load Plugin for jQuery

Quick Download Latest source or minified.

Demo Page: Plugin enabled with fadein effect

Integration of Lazy Load into BlogEngine.NET:

First, log into your blog and open Settings page. In the Custom Code section, you can paste the code block into Tracking Script textbox. Why did I choose this part will be mentioned later in this post.

lazyloader settings

Here is the code block that I used for my blog:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="Scripts/jQuery/jquery.lazyload.mini.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {         
          $(".post img").lazyload({
             placeholder : "img/grey.gif",
             effect      : "fadeIn"
          });
      });
  </script>

Required files and notes about the code block:

jQuery: hosted on Google’s servers rather than my folders so I do not worry about speed. I used latest version available by writing 1.4.3 in the code. Here is an article about the subject.

3 reasons why you should let Google host jQuery for you

jQuery.lazyload.mini.js: I have downloaded mini version since I will not edit this script file, little size is good. I uploaded it into my Scripts/jQuery folder.

Used $(".post img").lazyload rather than $("img").lazyload. Because, in the latter one, images inside the widgets or on your sidebar are not loaded before the images inside your blog posts are loaded. It can be inappropriate if you have advertisements on your sidebar. You can try both one to see the difference. It is up to you. (Thanks prabir)

Notes about the reason for selecting Tracking Script textbox: Yahoo YSlow indicates that you should add/include your scripts to the end of your page. Therefore, I prefer to write this code block into Tracking Script part. Again, it is up to you.


That’s it. Any comments are welcome.

blog comments powered by Disqus

About Author

Murat Duman, muratduman, blog  author, seo optimized 

Murat Duman

E-mail Send mail


Facebook ProfileTwitterLast FMFlickr PhotosFriendFeed UpdatesFeedburner RSS 

AdSense