Добавить задержку при наведении мыши, используя Javascript - PullRequest
Новая
       21

Добавить задержку при наведении мыши, используя Javascript

0 голосов
/ 30 марта 2012

Я использую следующий скрипт для всех указателей мыши на изображениях: 

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>

Обернуть ли часть тайм-аута в собственный тег сценария?Спасибо за быструю помощь!

1 Ответ

2 голосов
/ 30 марта 2012

Вы можете использовать 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, он будет загружен при наведении мыши.

Вместо использования атрибута onmouseover мы используем onmouseover событие + обратный вызов в файле JS.Теперь мы можем добавить задержку: 

<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>
...