增加延迟使用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>