Question

In our app we store HTML in a db table and render that out to the user at a certain point, the HTML can have quite a number of images (that can be large in size) in it, what I would like to do is pre-parse the HTML when we retrieve it from the database and replace any image tags with something that would allow us to load the images once the rest of the data has been presented to the client.

ie. document gets returned and one by one the images get requested and loaded by the client rather than the client having to wait for the entire document and images to load before they see anything.

Is there anything that exists currently, maybe a jquery plugin or similar that offers this kind of functionality?

Our app is an asp.net 3.5 website using Telerik controls (which uses jquery)

Answer 1

Replace your img src attributes with a “#”, and add a custom attribute, something like this:

<img src="#" delayed="http://mydomain.com/myimage.png"/ >

Then, add a javascript line when your page loads that does something like this (untested, but you get the idea):

$('img').each(function(){
  $(this).attr('src', $(this).attr('delayed'));
});

there is also the lazy load plugin.. http://www.appelsiini.net/projects/lazyload