在使用javascript加载页面之前缓存数组中的动态图像

我正在尝试制作4个滑动图库，但在以图库形式显示图像之前，我需要在启动屏幕后预加载（缓存）所有图像。我一直在尝试使用“jPreLoader v2-”，但运气不好

下面的代码是我如何尝试将每个库目录中的所有图像预加载到jpreloader后面的单个库中，然后在加载完成后删除整个库并一次显示每个库

var pictures =  [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    .......,
    "30.jpg"
 ]

$(window).load(function(){

preLoad();

function preLoad(){
    var max = 30;
    var pic;
    picture = '<table id="table" style="dipslay:table;"><tr>';
    for (var i=0;i < max; i++){
        if(i < 30){
            pic = "images/art/"+pictures[i];
            appendCell(pic);
        }
        if(i < 17){
            pic = "images/street/"+pictures[i];
            appendCell(pic);
        }
        if(i < 19){
            pic = "images/doc/"+pictures[i];
            appendCell(pic);
        }
        if(i < 16){
            pic = "images/commercial/"+pictures[i];
            appendCell(pic);
        }
    };
    picture += '</tr></table>';
    $('#imageScroller').append(picture);
}

function appendCell(pic){
    picture +="<td class='image'><img class='i' src='"+pic+"'></td>";
    return;
}
});

---

谢谢。

下载图像时更新的自定义进度条

var pictures = [
                    "1.jgp",
                    "2.jpg"
                ];

var loadedSoFar = 0;

function loaded( ) {
    // do stuff
}

function updateProgress( ) {

    loadedSoFar++;

    var newWidth = $("#progress").width() * ( loadedSoFar / pictures.length );
    $("#bar").stop( true, true );
    $("#bar").animate({ width: newWidth }, 500, function( ) {
        if( loadedSoFar === pictures.length ) { loaded() }
    });
}

for( var i = 0; i < pictures.length; i++ ) {
    var img = new Image();
    img.src = pictures[ i ] + i;

    img.onload = function( ) {
        updateProgress();
    }
}

var图片=[
“1.jgp”，
“2.jpg”
];
var loadedSoFar=0；
已加载函数（）{
//做事
}
函数updateProgress（）{
loadedSoFar++；
var newWidth=$（“#进度”）.width（）*（loadedSoFar/pictures.length）；
$（“#bar”）.stop（true，true）；
$（“#条”）。动画（{width:newWidth}，500，函数（）{
如果（loadedSoFar==pictures.length）{loaded（）}
});
}
对于（变量i=0；i

---

演示

请链接到您正在使用的插件，仅名称没有多大帮助。您是否尝试过

$（“#imageScroller”）.append（picture）.jpreLoader（）？为什么在加载下一个之前要等待加载一个？如果你允许的话，浏览器可以并行下载多个图像，这会使事情变得更慢。如果你有30个图像1200px x 1200px呢。如果它们相对较小，则应以合理的速度下载。虽然我能看出你所说的优点：）没关系。这根本不是您需要进行的优化。浏览器非常擅长下载东西。一个网页只是一个要下载的资产列表，它经过了优化，可以很好地做到这一点。这种强制排队解决了什么问题？我们需要预加载图像，以获得滑块尺寸，从而使滑块正常工作。使用img阵列是否仅用于加载所有图像？预加载后，我可以继续使用图片数组+目录吗？让它像一个魔咒一样工作，必须将所有图片添加到一个数组中，然后通过您的代码发送，因为我有4个文件夹，其中最多有30个图片，这是目前无法支持的
var pictures = [
                    "1.jgp",
                    "2.jpg"
                ];

var loadedSoFar = 0;

function loaded( ) {
    // do stuff
}

function updateProgress( ) {

    loadedSoFar++;

    var newWidth = $("#progress").width() * ( loadedSoFar / pictures.length );
    $("#bar").stop( true, true );
    $("#bar").animate({ width: newWidth }, 500, function( ) {
        if( loadedSoFar === pictures.length ) { loaded() }
    });
}

for( var i = 0; i < pictures.length; i++ ) {
    var img = new Image();
    img.src = pictures[ i ] + i;

    img.onload = function( ) {
        updateProgress();
    }
}