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>

Amit · Accepted Answer · 2015-08-13 20:27:42Z

1

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);
     }
});

answered Aug 13, 2015 at 20:27

Amit

46.5k9 gold badges84 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

travisthurston Over a year ago

Thanks! This doesn't work either though. I'm still getting the grey image delay on initial load and hover state.

Amit Over a year ago

Is that code even running (set a breakpoint inside to make sure)?

blzn · Accepted Answer · 2015-08-14 21:28:19Z

0

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);
    };
  }
});

edited Aug 14, 2015 at 21:28

answered Aug 13, 2015 at 20:40

blzn

3521 gold badge3 silver badges15 bronze badges

1 Comment

blzn Over a year ago

@tvieso, try to change the $('document') by $(document), without the quotes.

Collectives™ on Stack Overflow

Pre-loading images with Javascript | Not Working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related