Load image array and load next images, when clicking

问题

I'm trying to build a progressive slider with x images. The meaning is, that on page load the slider loads 3 images in slider container, no matter how many images the array contains.

Click on next/prev should slide the first 3 images to either side and then load the next 3 (if any).

It should send the next index number to the next function and increase/decrease on click.

Does this make any sense? :) It is a fast mockup I've made... Any ideas are welcome :O)

THX!!!

var aImages = new Array("image1.jpg","image2.jpg","image3.jpg");
var slideImage = 1;

function showImages()
{
    var startImage = (slideImage -1)*6+1;
    var endImage = (startImage +5);

    for(i=startImage ; i <= endImage ; i++)
    {
        $('imageId'+ i).src = aImages[i];
        slideImage ++;
    }

}

function slideImages()
{        
    var startImage = (slideImage -1)*6+1;
    var endImage = (startImage +5);

    for(i=startImage ; i <= endImage ; i++)
    {
        $('imageId'+ i).src = aImages[i];
    }
}   

slideImages();

回答1:

To have an optimal experience you should at least preload the previous 3 and the next 3 images

You could also do something like

var imageList = [];
for(...)
{

    var img = new Image();
    img.src = '';
    imageList.push(img);

}

to keep them in cache

and use 9 image placeholders (central 3 plus 3 to each side) and then just apply the

imgNode.src = imageList[x].src

来源：https://stackoverflow.com/questions/14774824/load-image-array-and-load-next-images-when-clicking