預先載入圖像對於改變

Question

我試圖重新創建一個行爲像這樣一頁一頁的背景圖像鏈接：

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

我成功地使用jQuery來獲取背景圖像懸停時改變我這個代碼鏈接：

<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> 

然而，我第一次懸停在一個鏈接，有一瞬間，其中的背景去其設置爲透明的默認背景色。一旦我在鏈接上懸停一次，背景圖像之間來回變換，沒有背景顏色，所以我猜如果我加載圖像，我不會看到背景顏色。

任何幫助將不勝感激！

Answer 1

我發現這是以前在我的最後一個問題，替我作了回答@cale_b

stackoverflow.com/a/476681/870729

謝謝！

Answer 2

這是一些快速和骯髒的事情，應該讓你開始。

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