div にランダムな背景画像を与えようとしています。ページの先頭に非常に単純な php があります。
<?php
$bg = rand(1, 6);
$bgchange = $bg.".jpg";
?>
に続く
<style type="text/css">
.cover {
background-image: url('../img/backgrounds/<?php echo $bgchange; ?>');
}
</style>
これは機能していますが、特にインターネット接続が不十分な場合、何らかの理由で失敗することがあります。
私がやりたいのは、jquery を使用して、ドキュメントの準備が整った AJAX が php ファイル (現在ヘッダーにある php) を指すようにすることです。文書の準備が整った後。
Javascriptスクリプトを使用して「ドキュメント準備完了」イベントを検出し、それがトリガーされたときに、必要なスクリプトを実行するPHPページへのAJAXリクエストを実行できると言われました。
jQuery を使用すると、ready() と ajax() を使用するのと同じくらい簡単になります。
すでにどこでもこれを行っている人が見つからないので、これを実装する方法を提案できますか...
私が使用した解決策は次のとおりです。
var images = [
'1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
var randomNumber = Math.floor(Math.random() * images.length);
var randomImage = "images/" + randomNumber + ".jpg";
jQuery.ajax(randomImage);
$(document).ajaxComplete(function() {
$('.cover').css({ 'background-image': 'url(' + randomImage + ')' }).addClass('loaded');
})
そしてCSS
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.cover {
height: 100%; width: 100%;
margin: 0 auto;
background: #bada55;
background-position: 50% 50%;
transition: opacity 2s ease;
opacity: 0;
}
.loaded {
opacity: 1;
}
背景画像の 1 つだけがダウンロードされ、その画像が読み込まれたときにのみ微妙なフェードインなどの機能を実行できるようになります。