Delay image loading with jQuery

If you're using jQuery (and I assume you are as this is tagged as such) take a look at the Lazy Load Plugin for jQuery. It delays the loading of images that are outside the viewport until the user scrolls to them.

Update 2015: This plugin was broken at one point, but now works again. The last comment says as much, but I almost missed it because it was hidden in the collapsed comments.

Sure you can. Replace your img src attributes with a "#", and add a custom attribute, something like this:

<img src="#" data-delayedsrc="/img/myimage.png" />

Then, add a javascript line when your page loads that does something like this:

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