Pre-loading images with Javascript | Not Working

Question

I have a masonry grid where the images are black and white and when you hover over them, the color images appear. They are not composite images. They are all separate. (I'm just sorting out bugs for someone else's code)

On initial hover after a fresh page load, there is a delay (and grey overlay) when hovering over. After the initial, it's of course instantaneous when it switches to the color photo.

So what I'm trying to do is pre load the images with some javascript, but I'm having trouble doing this. Below is what I have for code. Also, this is in Wordpress. Not sure if that matters.

All of the images are background images too, not hardcoded into the html. It's all background css. Thanks for any help!

<script language="JavaScript">

$('document').ready(function preloader() {

     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="images/treatment_locations.jpg"
     images[1]="images/community_news_events.jpg"
     images[2]="images/success_stories.jpg"
     images[3]="images/self_assessment.jpg"
     images[4]="images/our_associates.jpg"
     images[5]="images/treatment_programs.jpg"
     images[6]="images/patient_portal.jpg"
     images[7]="images/FAQ.jpg"
     images[8]="images/what_to_expect.jpg"

     // start preloading
     for(i=0; i<=8; i++) 
     {
          imageObj.src=images[i];
     }
});

</script>

Answer 1

That's another aproach, where it stores only the images that were successfully loaded.

var imgObjs = [];

$(document).ready(function preloader() {

  // images list

  var images = [
    'treatment_locations.jpg',
    'community_news_events.jpg',
    'success_stories.jpg',
    'self_assessment.jpg',
    'our_associates.jpg',
    'treatment_programs.jpg',
    'patient_portal.jpg',
    'FAQ.jpg',
    'what_to_expect.jpg'
  ];

  for (var i in images) {

    var img = new Image();
    img.src = 'images/' + images[i];

    // stores it on array after loading

    img.onload = function() {
      imgObjs.push(this);
    };
  }
});

Answer 2

If you overwrite the src in each iteration, you're not giving the browser a chance to fetch the image. You probably only preload the last image.

Try:

var imageObjs = [];
$('document').ready(function preloader() {

     // counter
     var i = 0;

     // set image list
     images = new Array();
     images[0]="images/treatment_locations.jpg"
     images[1]="images/community_news_events.jpg"
     images[2]="images/success_stories.jpg"
     images[3]="images/self_assessment.jpg"
     images[4]="images/our_associates.jpg"
     images[5]="images/treatment_programs.jpg"
     images[6]="images/patient_portal.jpg"
     images[7]="images/FAQ.jpg"
     images[8]="images/what_to_expect.jpg"

     // start preloading
     for(i=0; i<=8; i++) 
     {
          var imageObj = new Image();
          imageObj.src=images[i];
          imageObjs.push(imageObj);
     }
});