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

There is no way (that I know of) to do what you're asking.

To make a page with numerous image load faster, check out Javascript Preloading.

EDIT: turns out I was answering a different question, so please disregard this response.

Answer 2

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

<img src="#" delayedsrc="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('delayedsrc'));
});

Answer 3

Keep only one image into the HTML so that viewer has something to start with, then inject the rest using jQuery with $(document).ready(function(){//load rest of the images}); You can also use event loaders and AJAX or "load as you go", just build a simple call back function if it's auto-rotating gallery or load on click.

Answer 4

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.