javascript - Delay image loading with jQuery

Question

I have a page with several galleries including accordions and sliders. The problem is that the page takes forever to load. Is there a way of wrapping an image in a bit of code or applying a class to it to force it to load only after everything else is loaded?

Answer 1

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