Question

var img = new Image();
img.src = "images/myFolder/myImage.png";

以上只会加载myImage.png。如何加载myFolder的所有图像？

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

function fDoesntExist() {
    bFinishCheck = true;
}

Answer 2

JavaScript无法直接访问文件系统的内容。您必须首先使用服务器端脚本（用PHP等编写）传递内容。

然后，一旦有了这个，就可以在JavaScript中使用循环来单独加载它们。

Answer 3

您需要一些方法来获取该文件夹中的文件列表。这可以手动定义为数组，也可以通过AJAX请求检索到为您列出文件的服务器端脚本。无论哪种方式，都没有“神奇”的方法来获取文件夹中的所有图像。

Answer 4

如果您拥有该文件夹中文件的所有名称，则需要循环浏览并按名称打开每个图像。您不能直接加载整个文件夹，也无法通过Javascript访问文件系统来获取名称，您需要通过PHP之类的方式将它们传递给页面。

JavaScript：如何加载文件夹中的所有图像？

4 个答案: