优化幻灯片与数百个图像

Optimizing slideshow with hundreds of images

本文关键字：百个 图像 幻灯片 优化      更新时间：2023-09-26

我正在制作一个包含数百张图像的幻灯片，用户可以通过单击'下一步'或'上一步'按钮进行导航。我的代码目前设置的方式是，每次用户做出导航决定点击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>

您应该在这种情况下预加载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。但是现在，你的代码设置的方式，这应该工作得很好。

约翰的解决方案很好。更重要的是，你可以异步运行'preload'函数，以便在后台加载图像:

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

此外，您可以使用'preload'函数中的位数组来检查图像是否先前加载过。它应该节省时间，我的意思是:

       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;
                }      
             }
        }
相关文章：