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"，或者只删除它不需要。

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上。如果我们不预先加载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>

使用Javascript向Mouseover添加延迟

1 个答案: