0

I'd like to try this preload img script found on a previous stackoverflow question- Preloading images with jQuery

for clarification's sake, my image path is img/bg/image1.jpg will I need to change anything in this script for it to work? Also, do I need any other files like a specific jquery version? How can I test that it is working?

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}   
preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);
Community
  • 1
  • 1
JJM
  • 119
  • 4
  • 9
  • open developer tools and look at network traffic and look when and how many times it sends request for image – karaxuna Feb 21 '13 at 17:21

1 Answers1

0

You only need to load jQuery and of course put the correct image path in the array

preload([
    'img/bg/image1.jpg'
]);

What the script does is create an <img> tag in memory and loads the image with the given source. That's it. It won't appear on screen unless you add the <img> to the DOM.

If you have a debug tool like Firebug, you can look at the "NET" tab and verify that the image is being loaded in memory.

VVV
  • 7,563
  • 3
  • 34
  • 55
  • thanks- and if my path was images/bg/image1.png would that work as well? Would I need to change this line: $('')[0].src = this; for any reason? i downloaded jquery-1.9.1 – JJM Feb 21 '13 at 17:20
  • nevermind- I changed to $('')[0].src = this; which is the same path that I now have and the page is now loading much faster. Thanks for your help – JJM Feb 21 '13 at 17:36