Preload images for links that change the background image

Question

I am trying to re create a page that behaves like this page:

http://www.farmleague.us/team/

I am successfully using jquery to get the background images to change when hovering over my links with this code:

<script>
// Since we're using these multiple times, assign them to variables
var $link = jQuery('#block-yui_3_17_2_2_1468449172411_5050');
var $image = jQuery('#collection-5786be4ed482e9c3a905d937');
// Get the original background image
var originalBackground = $image.css("background-image",       "url(https://static1.squarespace.com/static/57771b9e15d5dbc2f8fc084d/57771c55e3df28c63c9e687f/57771ca7440243196bc6801b/1467423990309/Gator.jpg?format=1500w)");
// jQuery hover supports TWO functions: first is "mouseover", second is "mouseout"
$link.hover(
// On mouseover, replace image
function() { 
    $image.css("background-image",  "url(https://static1.squarespace.com/static/57771b9e15d5dbc2f8fc084d/57771c55e3df2 8c63c9e687f/57771d441b631b48a1362df6/1467424076131/patagoniawater.jpg?format=750w)"); 
},
// On mouseout, put original image back
function() {
    $image.css("background-image",  "url(https://static1.squarespace.com/static/57771b9e15d5dbc2f8fc084d/57771c55e3df28c63c9e687f/57771ca7440243196bc6801b/1467423990309/Gator.jpg?format=1500w)", originalBackground);
}
); </script>

HOWEVER, The first time I hover over a link, there is a split second where the background goes to the default background color which is set at transparent. Once I have hovered over the link once, the background images change back and forth with no background color in between so I'm guessing if I loaded the images, I would not see the background color ever.

Any help would be greatly appreciated!

score 0 · Answer 1 · answered Jul 14 '16 at 22:46

Here is something quick and dirty that should get you started.

$(document).ready(function() {
  preloadImages();
})

function preloadImages() {
  var images = [
    'img/image1.jpg',
    'img/image2.jpg',
    'img/image3.jpg'
  ]

  images.each(function(){
    $('<img />').attr('src',this).appendTo('body').hide();      
  });
}

Preload images for links that change the background image

1 Answers1