Javascript 使用数百张图像优化幻灯片放映

我正在制作一个包含数百幅图像的幻灯片，用户可以通过单击“下一步”或“上一步”按钮来导航。按照当前设置“我的代码”的方式，每当用户做出导航决定单击“下一步”或“上一步”时，就会加载一个新图像（图像路径存储在数组中）。为了提高每个导航图像的加载时间，我试图想出一种方法，在任何给定时间加载前5个图像和后5个图像

因此，如果用户当前在

imagery[i]

上，我想加载

imagery[i-5]

直到

imagery[i+5]

。这样做将大大增加幻灯片的效果

先谢谢你

我的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]);
    });         

var指数=0；
$（'.catalog img container'）.attr（“src”，img_数组[index]）；
$（'#dialog'）.jqm（）；
$（“.next”）。单击（函数（）{
$（'.catalog img container'）.attr（“src”，img_数组[++索引%arrayLength]）；
});         
$（“.previous”）。单击（函数（）{
如果（--指数<0），指数=排列长度-1；
$（'.catalog img container'）.attr（“src”，img_数组[索引%arrayLength]）；
});         

我的标记

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

---

您应该预加载

图像

在这种情况下，我知道这就是您要问的方法。在不涉及太多细节和过于奢侈的情况下，我会从以下几点入手：

        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];
                }      
             }
        }

var指数=0；
//数组以保存预加载的img对象
var img=新数组（）；
//初始预载
预加载（img_数组，索引，5）；
$（'.catalog img container'）.attr（“src”，img_数组[index]）；
$（'#dialog'）.jqm（）；
$（“.next”）。单击（函数（）{
$（'.catalog img container'）.attr（“src”，img_数组[++索引%arrayLength]）；
预加载（img_数组，索引，5）；
});         
$（“.previous”）。单击（函数（）{
如果（--指数<0），指数=排列长度-1；
$（'.catalog img container'）.attr（“src”，img_数组[索引%arrayLength]）；
预加载（img_数组，索引，5）；
}); 
//在数组中预加载图像的基本函数，从currentIndex到所需的+-范围
函数预加载（数组、currentIndex、范围）{
对于（i=currentIndex；i=0）{
img[i]=新图像（）；
img[i].src=array[i]；
}      
}
}

当然，您可以创建一个更复杂、更详细的解决方案，但这是在显示图像之前预加载图像的基本思想

一旦你掌握了窍门，你就可以疯狂地在加载图像时动态地创建和插入新的

DOM

元素，从而创建一个可以滑动/滚动的UI。但就目前而言，您的代码设置方式应该适合您

---

我希望这对你有用。

约翰的解决方案很好。此外，您还可以异步运行“预加载”功能，以便在后台加载图像：

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

此外，您可以在“预加载”函数中使用位数组来检查图像之前是否已加载。这应该可以节省时间，我的意思是：

       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;
                }      
             }
        }

var-bitArray=新数组（NUM\u图像）；
对于（i=0；iI将首先加载+1，然后加载-1，然后加载+2，然后加载-2…这是最有可能的图像导航顺序。您可以使用
var image=document.createElement（'img'）；image.src=url；
）预加载图像，而无需将其添加到DOM中。这正是我需要的！谢谢！：）