[jquery] Loading remote images last in a webpage

Question

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?

Answer 1

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

Answer 2

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");
 });

Answer 3

You can append html with images on document ready:

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