0

I basically "created" the following function based on information totally from Stackoverflow:

function PreloadImageSources(arrayOfImageSources)
{
    // call with PreloadImages(['src1', 'src2', etc])

    var newImage = $('<img />');

    $(arrayOfImageSources).each(function() {
     /*
        alert(this);    // OK
     */
        newImage.get(0).src = this;    // explicit iteration because of .each
    });

 /*
    alert(newImage.get(0).src);    // still OK!
 */

    // return the new array of img objects, each with their .src set
    return $('<img />');
}

Both alerts show the correct string inside the function. But, once I return from the function,

var shutterImg = PreloadImageSources([options.shutterImgSrc]) [0];
alert(shutterImg.src);

this alert shows nothing as if it does not exist, in spite of the fact that I just assigned it inside the function.

What basic kernel am I missing?

  • 1
    There are multiple other answers that show how to preload images: [Image preloader javascript that supports events](http://stackoverflow.com/questions/8264528/image-preloader-javascript-that-supports-events/8265310#8265310), [Is it possible to insert images in cache before rendering](http://stackoverflow.com/questions/8831345/is-it-possible-to-insert-images-in-cache-before-rendering/8831405#8831405) and [Is there a way to load images to user's cache asynchronously?](http://stackoverflow.com/questions/8450068/is-there-a-way-to-load-images-to-users-cache-asynchronously/8450190#8450190) – jfriend00 Jul 05 '15 at 07:13
  • `return $('');` is returning a jQuery object with a single new image object in it which does not have a `.src` property which is why your alert does not show a src url. I don't know why you are returning that as it serves no useful purpose and has no relationship at all to the images that you preloaded. – jfriend00 Jul 05 '15 at 07:21
  • Thanks everyone ... thanks to you, I discovered my mistake ... .attr('src', this) is correct, but .attr('src') = this is not –  Jul 06 '15 at 17:12

2 Answers2

0

You are alerting (and returning) the src of a new image, not the ones you are creating in your loop.

To add a list of images to your page you might do something like this:

function PreloadImageSources(arrayOfImageSources) {
    var arrayOfImages = [];
    $(arrayOfImageSources).each(function () {

        // create a new image with jQuery and set the src of the image
        var $img = $('<img />').attr('src', this);

        // add the new image to an array
        arrayOfImages.push($img);

    });

    return arrayOfImages;
}

var imageArray = PreloadImageSources(sourcesArray);

// alert the src of the first image
alert(imageArray[0].attr('src'));

// or iterate over your array of images
$(imageArray).each(function () {

    // add each to the dom
    $('body').append(this);

});
som
  • 2,023
  • 30
  • 37
  • Thanks everyone ... thanks to you, I discovered my mistake ... .attr('src', this) is correct, but .attr('src') = this is not –  Jul 06 '15 at 17:01
  • also where you return $("") you are creating a new image, not return the one you added a source to. @user3104710's answer is the most elegant solution here. – som Jul 06 '15 at 23:00
0

Since you are using each on array of sources you are always returns last element. But that is also a single object not an array of objects. Because of that your code was not working.

Please check this the below tested code.

function PreloadImageSources(arrayOfImageSources)
{ 
    return jQuery.map(arrayOfImageSources, function(imageSrc){
           return jQuery("<img />").attr("src", imageSrc);
   });
}
user3104710
  • 1
  • 3
  • Thanks som & user3104710 ... thanks to you, I discovered my mistake ... .attr('src', this) is correct, but .attr('src') = this is not –  Jul 06 '15 at 17:02