0

我试图给一个 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），我希望这将使 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;
}

只有一个背景图像被下载，然后能够执行一个功能，例如只有在该图像加载时才进行微妙的淡入等。

4

0 回答 0