Question

我正在尝试为我的网站创建一个灯箱，我希望它能够使用文件名像.jpg一样加载给定目录中的所有图片。

这是我的代码：

for(var i=0; i<1000; i++)
{
var filename = "images/image"+i+".jpg";
$.get(filename)
    .done(function() { 
            $('#lightbox').append('<a href="images/image'+i+'.jpg" data-lightbox="lb" data-title=""><img src="placeholder.gif"></a>');
        })
    .fail(function() {
        i=1000; //ugh
    });
}

它有点工作，但只尝试加载image1000.jpg。

此外，有更好的方法来做这样的事情吗？我确实说过这么多次，当我手动更换for循环计数器时停止。不满意。

Answer 1

如果您的图像名称是如您所说的顺序，您可以为名称创建一个循环，在每次迭代时检查图像是否存在 - 如果它没有 - 打破循环：

   var bCheckEnabled = true;

var bFinishCheck = false;

var img;
var imgArray = new Array();
var i = 0;

var myInterval = setInterval(loadImage, 1);

function loadImage() {

    if (bFinishCheck) {
        clearInterval(myInterval);
        alert('Loaded ' + i + ' image(s)!)');
        return;
    }

    if (bCheckEnabled) {

        bCheckEnabled = false;

        img = new Image();
        img.onload = fExists;
        img.onerror = fDoesntExist;
        img.src = 'images/myFolder/' + i + '.png';

    }

}

function fExists() {
    imgArray.push(img);
    i++;
    bCheckEnabled = true;
}

加载未知数量的图像

1 个答案: