Prevent / Postpone loading of html elements

Question

In developing my portfolio, I realised it takes a long-time for the page to load as all the images have to load in order for the page-load to be complete.

So, I was wondering if there is a way, any way, to prevent or stop the loading and then allow it later on.

Meaning something like, prevent the loading immediately and then on click of another element that had loaded, lets say #title, then load.images.

Is this possible and if so how?

Thanks in Advance!

Answer 1

Something like this:

HTML

<img src="" class="lazyload" data-attr="image1.jpg" alt="Alt" title="Title" width="50" height="50" />

Jquery

$('#title').click(function(){
    $('.lazyload').each(function(){
        $(this).attr('src',$(this).attr('data-attr'));
    });
});

Or you could use the LazyLoad plugin for slightly different functionality.