Images ondemand

This is a very easy technique to improve web page performance by implementing the tip “Make fewer HTTP Requests“. How? By avoiding downloading images that users will never see.

For instance, you can see what happens on firebug when the browser has to download all thumbnails from a popular blog post, which has a lot of comments. It’s clear to see that downloading and rendering each image on those comments consume a lot of client-side time. Moreover, these images also consume a lot of bandwidth.

Another important point is that this kind of pages have a big height and the average user only has 800px of window height. So, what happens whenever a user requests a page, reads something on an interesting banner and decides to click and leave our page: On the one hand,it is always a good thing to get a banner click, but on the other hand, the browser has had to load all images on that page, even when the user never scrolls and sees what things there are behind the first’s 800px. Therefore, I know you are very smart, and now you know that “scroll” is the keyword here.

The technique to avoid the previous situation on our pages comprises two parts: frontend and backend.

The backend problem is to decide what images are shown by default and what images are “hidden” by default. This part of the problem has not a general or common solution which will depend on our backend code. Then we only have to apply a little switch of properties on img tags, and mark this img tags using a css class.

In this example (on php), I define that I want to show 3 firsts comment’s thumbnail images by default:

$counter = 0;

foreach($comments as $comment){

$counter ;

if($counter > 3){

$img = “<img src=’img/pix.gif’ longdesc=’{$comment->thumbnail_url}’ class=’image-ondemand’/>”;

}else{

$img = “<img src=’{$comment->thumbnail_url}’ />”;

}

echo “<div> $img <p>{$comment->content}</p></div>”;

}

The frontent problem is how to detect on the scroll event the browser, and switch the properties on img tags.

In this example, I use jquery:

var images_switched = false;

$(window).scroll(function(){

if(!images_switched){

images_switch = true;

$(’image-ondemand’).each(function(){

$(this).attr(’src’,$(this).attr(’longdesc’));

});

}

});

I think that it is posible to implement this technique by distincts methods, it is just a example.

Enjoy