Slide show with prioritized loading of images

Question

I am looking for a slide show widget, e.g. as a jQuery plugin. How it should look like, schematically (dotted rectangles are images that are not visible initially, navigation via arrow buttons):

....  ....       +--+  +--+  +--+       ....  ....
.  .  .  .  [<]  |  |  |  |  |  |  [>]  .  .  .  .
....  ....       +--+  +--+  +--+       ....  ....

Requirements:

• The three visible images should load as quickly as possible.

• No typical lazy loading: The initially invisible images should load automatically and right away after all visible images have loaded.

Idea: fast initial page load, optimal use of bandwidth, no unnecessary waiting times.

Suggestions?

Answer 1

You could add the source to hidden images after page load.

Hidden images: <img data-src="/images/image1.jpg">

After the page load run something like:

$(function () {
   $('img[data-src]').each(function () {
       var hImg = $(this),
           src = hImg.attr('data-src');

       hImg.attr('src', src);
   });
});

The slide show plugin should be included only after this document.ready function of course.