Verzögerung In den Mouseover Javascript mit

Question

Ich verwende das folgende Skript für mein Bild per Mouse over:

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

Wie kann ich einfach hinzufügen, sagen wir, ein oder zwei Sekunden Verzögerung, bevor es die Mouseover ausführt?

Vielen Dank im Voraus für Ihre Hilfe!

--- UPDATE ---

Danke für die Antworten. Entschuldige meine Unwissenheit, wenn es um Javascript geht. Wie kann ich das Timeout-Stück in das folgende Skript einfügen?

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

Umbruch das Timeout Stück in seinem eigenen Skript-Tag? Danke für die schnelle Hilfe!

Answer 1

können Sie setTimeout() verwenden, ein Beispiel:

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

---

Zunächst einmal Ihren Code ein paar Fehler haben:

• immer HTML-Tags in Kleinbuchstaben schreiben, nicht <SCRIPT> aber <script>
• Das langauge Attribut ist kein gültiges Attribut, verwenden Sie type="text/javascript" ins tead, oder entfernen Sie es einfach, es ist nicht erforderlich.

Und das Image-Objekt macht nicht wirklich ein Bild auf der Website. Das Bild wird vorab geladen, sodass Sie es auf Ihrer Website verwenden können, ohne es zu laden. Wie in diesem Beispiel:

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

Weil wir die /img/heavy-img.png vorladen können wir direkt sehen, die Schwer img wenn ich die Maus über den ersten img. Wenn wir den IMG nicht vorab laden, wird er geladen, wenn wir die Maus darüber bewegen.

Anstatt ein onmouseover Attribut zu verwenden, verwenden wir das onmouseover Ereignis + Rückruf in der JS-Datei. Jetzt können wir eine Verzögerung hinzufügen:

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