使用 Javascript 为鼠标悬停添加延迟

Question

我对所有图像鼠标悬停都使用以下脚本：

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

如何在执行鼠标悬停之前简单地添加一两秒延迟？

提前感谢您的帮助！

---更新---

感谢您的回复。请原谅我对 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"，或者直接删除它不是必需的。

而且 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上，我们可以直接看到heavy-img。如果我们不预加载img，鼠标悬停时就会加载。

我们在 JS 文件中使用 onmouseover 事件 + 回调，而不是使用 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>