将图片放入javascript中的数组

Question

im kinda new to javascript i mean i know the syntax but not so much the libraries.

i need some help to get some files (pictures) from a folder into an arry lets say:

var[] pictures = ?;

(the folder is in my project and contain some pictures)

so i can loop over them and diplay them on the page i did some search but i didnt find any guide on how to do this.

i realy want to understand on how to do this for future projects even a link to known guid you guys know we will be a big help.

if it help im using asp.net.

Answer 1

Well, there are a lot of ways to approach the problem, to me what you can do is (if you don't know the location of the images beforehand) make a service that returns the src of every image, store that in an array, and then show them in the page.

I believe you are using jQuery so you can make an ajax request like this:

jQuery.ajax({
     url: /*path to*/"Service.asmx/getSources"
     //options, check documentation
});

then, from asp, make a new service ( Service.asmx in my case) and create a method that returns the location of the pictures (in my case the method is called getSources )

I recommend you use JSON (and jQuery.getJSON() method) so you can return a List<string> .

Lastly you can iterate or store the sources in an array, I'll put an example with the getJSON method

var sources = []
jQuery.getJSON("Service.asmx/getSources", function(data) {
    for(var i = 0, len = data.length; i<len ; i++) {
      sources.push(data[i]);//store every source in the array
    }
});

once you have the sources you can display them like this fiddle

Tell me if it helped or if you need another solution.

Answer 2

If you want an array of pictures just to display them later, you can simply use:

var sources = [
    "path/to/yourImage1.jpg",
    "path/to/yourImage2.jpg",
    // ...
    "path/to/yourImageN.jpg",
];

var pics = [];
for(var i = 0; i < sources.length; i++) {
    var pic = new Image();
    pic.src = sources[i];
    pics[i] = pic;
}