如何从文件夹中收集所有图像

Question

在此fiddle

中

当您点击下一步时，会加载新图像。但是新图像是从互联网上加载的。

在我的应用中，所有图片都位于 img / image 文件夹中，图片名称为 1.jpg，hi.png 等

那么当我点击下一步时如何显示图像

我以为我会使用var srcs = [ 'http://lorempixel.com/150/100/city', 'http://lorempixel.com/150/100/sports' ];

修改var srcs = [ 'img/image/1.jpg', 'img/image/hi.png' ];

但是，如果我这样做，那么问题是我必须更改var srcs如果我将新图像添加到文件夹

例如，如果稍后我添加 3.jpg ，那么我必须手动var srcs = [ 'img/image/1.jpg', 'img/image/hi.png','img/image/3.jpg' ];

Answer 1

此

Read a local file using JavaScript HTML5 file api (offline website)

应该帮助你。阅读接受的答案;）

Answer 2

这里有一个可以帮助你的例子，它不是最佳的，但是有效http://jsfiddle.net/PrVRq/：

$('.images').on('loaded', function () {// load an image}

尝试加载下一张图片

img.load(function () {    
    $('.images').append(img);
    $('.images').trigger('loaded');
});

如果图像被加载，则触发加载的事件以加载另一个事件。