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

Question

In this fiddle

when you click on next then new images are loaded.But the new images are loaded from internet.

In my app all the images are located in img/image folder and the image names are 1.jpg,hi.png etc

So how can I show the images when I click on next

I thought i will modify var srcs = [ 'http://lorempixel.com/150/100/city', 'http://lorempixel.com/150/100/sports' ]; with var srcs = [ 'img/image/1.jpg', 'img/image/hi.png' ];

But if I do this way then the problem will be I have to change var srcs if I add a new image to the folder

For example If after a later time I add 3.jpg then I have to manually var srcs = [ 'img/image/1.jpg', 'img/image/hi.png','img/image/3.jpg' ];

Answer 1

Here an example that can help you, it's not optimal but works http://jsfiddle.net/PrVRq/ :

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

try to load the next image

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

if the image is loaded trigger the loaded event to load another one.