javascript - ページの更新時に背景画像を変更する

Question

私は現在、ページが更新されるたびにdivの背景画像を変更するphpをいくつか持っています。

私のHTMLの頭にはこれがあります

<?php 
$bg = rand(1, 6); 
$bgchange = $bg.".jpg"; 
?>

そして、これ

<style type="text/css">
.cover {
  background-image: url('../img/backgrounds/<?php echo $bgchange; ?>');
}
</style>

ご覧のとおり、これは非常に単純な php ですが、サイトが最初にコンピューターに読み込まれたとき、またはインターネットが低速で画像の読み込みに失敗した場合に問題が発生します。

これに対する解決策を推奨できるJavaScriptの人なら誰でも大歓迎です。また、画像が「フェードイン」する可能性があるため、JavaScriptの方が優れていると考えています。プロジェクトでjquery-1.10.2を参照しています。

誰かが私のphpコードを改善する方法を知っているか、コードが時々失敗する理由を提供できる場合、PSソリューションはjavascriptである必要はありません。それは本当に役に立ちます。

score 3 · Accepted Answer

最初に画像の配列を作成します。

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];

次に、ランダムな画像を背景画像として設定します。

 $('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() *      images.length)] + ')'});

それは問題なく動作するはずです。

score 2 · Accepted Answer

このアクションはjsで実行できます（実行する必要があります）。

ドキュメントロード機能でこれを行うことができます。//ドキュメント読み込み関数

$(function(){

    var bgImage = (Math.floor(Math.random() * 6))+ ".jpg;"
    $('.cover').css('background-image',"../img/backgrounds/"+bgImage);
});

このようにして、使用しているフォルダーを使用し続けることができ、何も変更する必要はありません。

2 に答える 2