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 .
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.
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.
Here is the code block that I used for my blog:
placeholder : "img/grey.gif",
effect : "fadeIn"
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.
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.