Steps to gather all the images within a directory

Question

Take a look at this demo

When you click on the "next" button, new images are loaded from the internet.

In my application, all the images are stored in the img/image folder with names like 1.jpg, hi.png, etc.

My question is, how can I display these images when the "next" button is clicked?

I am considering modifying the line

var srcs = [ 'http://lorempixel.com/150/100/city', 'http://lorempixel.com/150/100/sports' ];

to

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

However, if I do it this way, I will need to manually update the var srcs array every time a new image is added to the folder.

For example, if I add 3.jpg at a later time, I would have to edit

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

manually.

Answer 1

Answer №1

Check out this example that might be helpful, although it may not be the most efficient solution http://jsfiddle.net/PrVRq/:

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

Attempt to load the next image

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

If the image is successfully loaded, trigger the 'loaded' event to load another one.

Answer 2

Check out this example that might be helpful, although it may not be the most efficient solution http://jsfiddle.net/PrVRq/:

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

Attempt to load the next image

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

If the image is successfully loaded, trigger the 'loaded' event to load another one.