Question

I’ve been working on a kind of slideshow for learning materials, pictures etc.

A colleague of mine mentioned something that bothers me a little. Since it may happen that there are more that 50 images in one slideshow, it takes some time until the page finished loading and starts the slider-animations.
I’ve been wondering if there is a way of just loading the next 5 or 10 slides, instead of loading all of them at once?

Maybe one of you guys knows a proper solution to this problem?

Here the HTML-Code:

<div id="galleria1" class="JSLgallery" width="640" height="450" data-interval="1000" data-fadeTime="0" data-animation="fade">
        <div class="JSLmask">
            <a href="#" class="show" >
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie1.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie2.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie3.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie4.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie5.jpg" />
            </a>
            <a href="#">
                <img width="640" height="450" alt="" rel="Slider-Image" src="/LMS/JSLslider/Images/Pyramid/Folie6.jpg" />
            </a>
        </div>
    </div>

Thanks in advance,

Mario

Answer 1

You can delay load images using many techniques, one of which goes like:

a) Define your image url in an attribute other than src (for example isrc), for all images except the first.

<img width="640" height="450" alt="" rel="Slider-Image" isrc="/LMS/JSLslider/Images/Pyramid/Folie1.jpg" />

b) In your page startup code and on each ‘move-to-next-slide’ event, you can call:

function loadMoreImages() {
    var limit = 5;
    var i = 0;
    $('img[isrc]').each(function() {
        if(i < limit) {
            $(this).attr('src', $(this).attr('isrc'));
            $(this).removeAttr('isrc'));
        }
        i++;
    });
}

$(document).ready(function() { 
    loadMoreImage(); 
    $('#yournextbutton').click(function() { loadMoreImage(); });
});