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.

That is my life, sometimes

30. October 2010 20:18 by mduman in Design  //  Tags: , ,   //   Comments

http://redesignland.blogspot.com/

site-delete_f01

site-delete_f02

site-delete_f03

site-delete_f04

site-delete_f05

site-delete_f06

site-delete_f07

Tony Dunn publishes very good comics, most of them are also related with the academy. We love you and follow you Tony. Keep up the good work.

Simplified Version of Famous Logos

30. October 2010 18:38 by mduman in Design  //  Tags: , ,   //   Comments

Created by http://imjustcreative.com/

google-logo

You do not have to search for it.

microsoft-logo

Best working corporation I have ever seen.

starbucks-logo

Someone said coffee?

Looking for more?

About Author

Murat Duman, muratduman, blog  author, seo optimized 

Murat Duman

E-mail Send mail


Facebook ProfileTwitterLast FMFlickr PhotosFriendFeed UpdatesFeedburner RSS 

AdSense