Html/JavaScript預加載圖像

Question

我有一個頁面有一些img鏈接。當圖像處於hover狀態時，我在頁面內更改div的背景。 JavaScript代碼是如下：

function hover(element) { 
    if(element.id=="first"){ 
     element.setAttribute('src', './images/first_active_2.png'); 
     back.style.backgroundImage = 'url(./images/1.png)'; 
     text.src = './images/text_first_active.png'; 
    } 
    if(element.id=="second"){ 
     element.setAttribute('src', './images/second_active_2.png'); 
     back.style.backgroundImage = 'url(./images/3.png)'; 
     text.src = './images/text_second_active.png'; 
    } 
} 

function unhover(element) { 
    if(element.id=="first"){ 
    element.setAttribute('src', './images/first_inactive_2.png'); 
    text.src = './images/text_first_inactive.png'; 
    } 
    if(element.id=="second"){ 
    element.setAttribute('src', './images/second_inactive_2.png'); 
    text.src = './images/text_second_inactive.png'; 
    } 
} 

和html代碼：

<div id="back"/> 
    <a> 
    <img id="first" src="images/first_inactive_2.png" onmouseover="hover(this);" onmouseout="unhover(this);" /> 
    </a> 
    <a> 
    <img id="second" src="images/second_inactive_2.png" onmouseover="hover(this);" onmouseout="unhover(this);"/> 
    </a> 

一切都很好，但有時候背景圖像閃爍的事實。我想我必須預先填寫這兩個images/1.png,images/2.png，但我不知道如何正確執行。有沒有正確的方式讓圖像不閃爍？

Answer 1

var img = new Image（）; img.src =「/path/to/image.jpg」;

這可能在某處的window.load或dom：ready事件中，這樣您可以預加載圖像。

Answer 2

幾周前我有類似的問題。您可以使用'onload'事件預加載圖像：

var tmpNewImg = new Image(); 
tmpNewImg.onload = function() { 
    var yourDiv = document.getElementById('picture'); 
    yourDiv.style.backgroundImage = 'url(' + this.src + ')'; 
} 

tmpNewImg.src = '/your/background/image.jpg'; 

這有助於解決我的問題。但在這種情況下，我沒有測試代碼。

Answer 3

使用CSS :hover和preload懸停圖像:after僞元素：

div { 
    background: url(http://keddr.com/wp-content/uploads/2013/12/google.png); 
    width:300px; 
    height: 200px; 
    background-size: 100% 100%; 
} 

div:after { 
    content: ''; 
    font: 0/0 a; 
} 

div:hover, 
div:after { 
    background-image: url(http://hi-news.ru/wp-content/uploads/2013/11/0111.jpg); 
}