My attempt at preloading images

Question

Ok I nabbed method C for preloading images from this question best way to preload multiple images I'm trying to implement it into a get Json array

$.getJSON('/pageCall.php',{chapters:chapterNumber}, function(data) 
        {
            chapter=data;
            totalPages = chapter.length;

            var options = '';
            $.each(chapter, function(index, array) {
             images[index] = new Image();
             images[index].src = array['imageLocation'];
});
};

but when I try and call the images using the following method nothing appears

function callImage(ImageNo)
    {   
        $('#mangaImage').attr('src', images[ImageNo]);
    }

Answer 1

First, let's fix some syntax errors, (missing ), and this assumes chapter and totalPages are variables defined elsewhere already), it should look like this:

$.getJSON('/pageCall.php',{chapters:chapterNumber}, function(data) {
   chapter=data;
   totalPages = chapter.length;
   var options = '';
   $.each(chapter, function(index, array) {
      images[index] = new Image();
      images[index].src = array['imageLocation'];
   });
});

Note that this also assumes a structure like this:

[{"imageLocation": "url.jpg"},{"imageLocation": "url.jpg"}]

....if it's different, the loop will be different.

---

Also, what's in your array is an image, not a string...so you need to get the .src property from it. Instead of this:

$('#mangaImage').attr('src', images[ImageNo]);

It should be:

$('#mangaImage').attr('src', images[ImageNo].src);

Answer 2

You're missing a ) on the last line of the first script.

Change

};

To

});

;) - that's a wink