Javascriptを

Question

を使用してカーソルをあわせるために遅延を追加し、私はすべての私のイメージマウスオーバーのために次のスクリプトを使用しています：それはマウスオーバーを実行する前に

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

は、どのように私は単純に、たとえば、1秒か2秒の遅延を追加することができますか？

ご協力いただきありがとうございます。

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

タイムアウト部分を独自のスクリプトタグで囲みますか？クイックヘルプをありがとう！

あなたは、一例を setTimeout()を使用することができます

Answer 1

：

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

---

まず第一に、あなたのコードは、いくつかのミスがあります：

• は常に小文字、ない<SCRIPT>にHTMLタグを書きますが<script>
• langauge属性は有効な属性ではありません。type="text/javascript" insを使用してくださいティード、またはそれを削除するだけで、必要ではありません。

Imageオブジェクトは実際にウェブサイト上にイメージを作成していません。画像をプリロードするので、画像をロードせずにウェブサイトで使用することができます。この例のように：私たちは/img/heavy-img.pngをプリロードするので

<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オーバー重IMG私の場合、マウスを見ることができます。 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>