Loading remote images last in a webpage

I link to a lot of remote images on my service. The issue is that sometimes, retrieving the images takes very long, and the whole page stalls as a result. What can i do to get the images开发者_运维百科 to load at the end?

Remove the src from the remote images and give each of those img tags a unique ID. Create a jQuery function to assign the src for each img and call the function when the page is ready.

<img id="img1" /> <img id="img2" /> <img id="img3" />

$(document).ready(function() {
   $("#img1").attr("src","img1.jpg");
   $("#img2").attr("src","img2.jpg");
   $("#img3").attr("src","img3.jpg");
 });

If you want to use jQuery then you may have a look at the Lazy Load Plugin for jQuery: http://www.appelsiini.net/projects/lazyload

You can append html with images on document ready:

$(function(){
$('#container_id').append('<img scr="path_to_big_image">');
});