3

I am working on a slideshow that contains hundreds of images that the user can navigate by clicking 'next' or 'previous' buttons. The way my code is currently set up, every time a user makes a navigational decision to click next or prev, a new image is loaded at that time (image paths are stored in the array). To improve load time for every image navigated, I am trying to come up with a way to load the previous 5 images and next 5 images at any given time.

So if a user is currently on imageAry[i], I would like to load imageAry[i-5] up until imageAry[i+5]. Doing so will significantly increase the feel of the how the slideshow works.

Thank you in advance.

My JavaScript

    var index=0;

    $('.catalog-img-container').attr("src", img_array[index]);
    $('#dialog').jqm();
    $(".next").click(function(){
        $('.catalog-img-container').attr("src", img_array[++index%arrayLength]);
    });         
    $(".previous").click(function(){
        if (--index < 0) index = arrayLength - 1;
        $('.catalog-img-container').attr("src", img_array[index%arrayLength]);
    });

My Markup

        <div  class="catalogFrame">
            <img class="catalog-img-container" src="">
        </div>
4

2 回答 2

2

You should preload the images in this case which I know is what you are asking how to do. Without going into much detail and creating something too extravagant I would do the following as a starting point:

        var index=0;

        //Array to hold your preloaded img objects        
        var img = new Array();
        //Initial preload
        preload(img_array, index, 5);

        $('.catalog-img-container').attr("src", img_array[index]);
        $('#dialog').jqm();
        $(".next").click(function(){
            $('.catalog-img-container').attr("src", img_array[++index%arrayLength]);
            preload(img_array, index, 5);
        });         
        $(".previous").click(function(){
            if (--index < 0) index = arrayLength - 1;
            $('.catalog-img-container').attr("src", img_array[index%arrayLength]);
            preload(img_array, index, 5);
        }); 

       //Basic function to preload images in array, from currentIndex to desired +-range
       function preload(array, currentIndex, range) {
            for (i = currentIndex; i <= currentIndex + range; i++) {
                if(i<array.length){
                   img[i] = new Image();
                   img[i].src = array[i];
                }      
             }
             for (i = currentIndex; i >= currentIndex - range; i--) {
                if(i>=0){
                   img[i] = new Image();
                   img[i].src = array[i];
                }      
             }
        }

Of course you could create a more complex and detailed solution than this however this is the basic idea behind preloading your images before you show them.

Once you get the hang of it you can get wild and crazy and dynamically create and insert new DOM elements as the images are load allowing you to create a UI that slide/scrolls through them. But for now the way your code is set up this should work just fine for you.

I hope this works for you.

于 2013-01-17T15:17:13.123 回答
0

John's solution is good. What's more you can run 'preload' function asynchronously in order to load images in background: 

setTimeout(function() { preload(img_array, index, 5); }, 0);

Additionally, you can use array of bits in 'preload' function to check if image was loaded previously. It should save time, I mean:

       var bitArray = new Array(NUM_IMAGES);
       for(i=0;i<NUM_IMAGES;i++) bitArray[i] = 0;

       //Basic function to preload images in array, from currentIndex to desired +-range
       function preload(array, currentIndex, range) {
            for (i = currentIndex; i <= currentIndex + range; i++) {
                if(i<array.length){
                   if(bitArray[i] == 1) continue;
                   img[i] = new Image();
                   img[i].src = array[i];
                   bitArray[i] = 1;
                }      
             }
             for (i = currentIndex; i >= currentIndex - range; i--) {
                if(i>=0){
                   if(bitArray[i] == 1) continue;
                   img[i] = new Image();
                   img[i].src = array[i];
                   bitArray[i] = 1;
                }      
             }
        }
于 2013-01-17T15:22:38.850 回答