增加延遲使用Javascript

Question

我用我所有的圖像鼠標懸停下面的腳本鼠標懸停：

loadImage1 = new Image(); 
loadImage1.src="1.jpg"; 
staticImage1 = new Image(); 
staticImage1.src="1-roll,jpg"; 

我怎樣才能簡單地增加，也就是說，一兩週秒鐘的延遲它執行鼠標懸停之前？

在此先感謝您的幫助！

--- UPDATE ---

感謝您的回覆。說到Javascript，請原諒我的無知。如何在下面的腳本中包含超時段？

<SCRIPT LANGUAGE="JavaScript"> 
loadImage1 = new Image(); 
loadImage1.src="/wp-content/themes/Anna%20Rawson/images/1-blog.jpg"; 
staticImage1 = new Image(); 
staticImage1.src="/wp-content/themes/Anna%20Rawson/images/1-blog.jpg"; 
</script> 

是否將超時段包裝在自己的腳本標記中？感謝您的快速幫助！

Answer 1

您可以使用setTimeout()，一個例子：

var img1 = document.getElementById('my-img'); 
img1.onmouseover = function() { 
    setTimeout(function() { 
    this.src = 'my-img-2.png'; 
    }, 1000); // 1000ms = 1s delay 
}; 

---

首先，你的代碼有一些錯誤：

• 總是寫在小寫HTML標籤，不是<SCRIPT>但<script>
• langauge屬性不是有效屬性，請使用type="text/javascript" ins tead，或者只是刪除它不是必需的。

而Image對象並不是真的在網站上製作圖片。它會預載圖像，因此您可以在網站上使用它，而無需加載它。像這樣的例子：

<img src="/img/my-first-img.png" onmouseover="this.src = '/img/heavy-img.png'"> 
<script> 
    var heavyImg = new Image(); 
    heavyImg.src = '/img/heavy-img.png'; // preload the img 
</script> 

因爲我們預裝/img/heavy-img.png我們可以直接看到重IMG如果我鼠標移到第一張圖片。如果我們不預先加載img，那麼當我們將鼠標懸停時，它將被加載。

我們不使用onmouseover屬性，而是使用JS文件中的onmouseover事件+回調。現在我們可以添加延遲：

<img src="/img/my-first-img.png" id="my-img"> 
<script> 
    var heavyImg = new Image(); 
    heavyImg.src = '/img/heavy-img.png'; // preload the img 

    var myImg = document.getElementById('my-img'); // get the element with id="my-img" out of the DOM 

    // create a mouseover event 
    myImg.onmouseover = function() { 
    setTimeout(function() { 
     this.src = '/img/heavy-img.png' // load the img 
    }, 1000); // a delay of 1000ms = 1s 
    }; 
</script>