Question

我正在制作幻灯片，其中包含数百张用户可以通过点击“下一个”或“上一个”按钮进行导航的图片。我的代码当前设置的方式，每当用户做出导航决定点击next或prev时，此时加载新图像（图像路径存储在数组中）。为了改善每个导航图像的加载时间，我试图想出一种在任何给定时间加载前5个图像和下5个图像的方法。

因此，如果用户当前在imageAry[i]，我希望将imageAry[i-5]加载到imageAry[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]);
    });

我的标记

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

Answer 1

在这种情况下你应该预加载images，我知道你问的是怎么做。如果没有详细介绍并创造过于奢侈的东西，我会以下列为出发点：

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

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

一旦掌握了它，你可以狂野而疯狂地动态创建和插入新的DOM元素，因为图像加载允许您创建一个滑动/滚动它们的UI。但是现在你的代码设置方式应该对你有用。

我希望这适合你。

Answer 2

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

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

使用数百张图片优化幻灯片

2 个答案: