单击时加载图像数组并加载下一张图像 [英] Load image array and load next images, when clicking

问题描述

我正在尝试用x张图像构建一个渐进式滑块.意思是，无论数组包含多少图像，滑块在页面加载时都会在容器中加载3张图像.

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.

单击next/prev，应将前3张图像滑动到任一侧，然后加载后3张(如果有的话).

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.

这有意义吗? :)这是我制作的快速样机...欢迎任何想法:O)

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();

推荐答案

要获得最佳体验，您至少应预加载前3张和后3张图片

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

您还可以做类似

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

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

}

将其保留在缓存中

并使用9个图像占位符(每边3个中心加3)，然后只需应用

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

imgNode.src = imageList[x].src

这篇关于单击时加载图像数组并加载下一张图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！