1

私はjsファイルを作成し、関数を作成しました。それが行うべきことは、ページが読み込まれるたびに画像を変更することです..

function swapPic() {
    var imgSrc = [];
    imgSrc[0] = "/Content/Resources/cafe1.jpg";
    imgSrc[1] = "/Content/Resources/cafe2.jpg";
    imgSrc[2] = "/Content/Resources/cafe3.jpg";
    imgSrc[3] = "/Content/Resources/cafe4.jpg";
    imgSrc[4] = "/Content/Resources/cafe5.jpg";
    imgSrc[5] = "/Content/Resources/cafe6.jpg";

    var randomnumber = Math.floor(Math.random() * 5);
    var img = document.getElementById("imgContainer");
    img.setAttribute("src", imgSrc[randomnumber]);
    // alert("ok");
}

私のhtmlコードでは、私のimgタグで：

<img id="imgContainer"  src="~/Content/Resources/cafe3.jpg" onload="swapPic()"/>

行を追加しalert("ok")てページを一度リロードすると、警告ウィンドウがポップアップし続け、画像が変更されます。ウィンドウを閉じ続けると、まだポップアップして画像が変わります。しばらくすると止まりました。

そのため、その行を含めなかった間alert("ok")、関数は継続的に呼び出されて停止したと思います。それはとても速く起こるので、うまく見えます。

これは問題だと思います。私の関数が一度だけ呼び出されるようにするにはどうすればよいですか？

4

4 に答える 4

4

ではなく に追加する必要がonloadあります。bodyimg

<body onload="swapPic();">
    <img id="imgContainer"  src="~/Content/Resources/cafe3.jpg"/>
</body>

に追加onloadするとimg、画像がロードされるたびに関数が呼び出され、無限ループが発生します。

タグを変更できない場合は、現在の関数を次bodyのように置き換えます。swapPic()

(function swapPic() {
    var imgSrc = [];
    imgSrc[0] = "/Content/Resources/cafe1.jpg";
    imgSrc[1] = "/Content/Resources/cafe2.jpg";
    imgSrc[2] = "/Content/Resources/cafe3.jpg";
    imgSrc[3] = "/Content/Resources/cafe4.jpg";
    imgSrc[4] = "/Content/Resources/cafe5.jpg";
    imgSrc[5] = "/Content/Resources/cafe6.jpg";

    var randomnumber = Math.floor(Math.random() * 5);
    var img = document.getElementById("imgContainer");
    img.setAttribute("src", imgSrc[randomnumber]);
    // alert("ok");
})();

これにより、正確に 1 回実行されます。どこでも呼び出す必要はありません。

于 2012-12-29T16:57:03.930 に答える
3

画像には、画像の読み込みが終了したときに参照する独自の読み込みイベントがあります。したがって、srcを更新するたびに、ブラウザはもちろん画像の読み込みを開始し、読み込みが完了するとイベントを再度発生させます。サイクルが繰り返されます。

window.onloadウィンドウのロードイベントは1回しか発生しないため、関数を1回だけ呼び出すために使用できます。

于 2012-12-29T16:59:56.410 に答える
3

画像を添付onloadしました。この場合swapPic()、画像が読み込まれるたびに呼び出されます。そのため、無限ループが発生します。 を呼び出すとswapPic()、新しい画像が読み込まれ、再び がトリガーされswapPic()ます。詳細については、W3Schools: Event - Img Onloadを参照してください。

体に移動する必要がありswapPic()ます。swapPic()これは、ボディがロードされたときにのみトリガーされます。

別の方法は、javascript を使用することです。

// if you have jQuery
$(document).ready(function(){
    swapPic()
});

// ordinary javascript
window.onload = function() {
    swapPic();
}
于 2012-12-29T16:57:42.880 に答える
2

タブでオンロード機能を使用します。ところで、コードによるとimgSrc[5] = "/Content/Resources/cafe6.jpg";、ランダム関数は0〜4しか生成しないため、表示されることはありません。そのはず var randomnumber = Math.floor(Math.random() * 6);

于 2012-12-29T17:11:45.947 に答える