在页面刷新时更改背景图像

Question

我目前有一些php，每次刷新页面时都会更改div的背景图像。

在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。 / p>

P.S。解决方案不一定是javascript，如果有人知道如何改进我的PHP代码或可以提供代码有时失败的原因，这将是非常有帮助的。

Answer 1

首先创建一个图像数组：

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)] + ')'});

这应该没问题。

Answer 2

您可以（并且应该）在js中执行此操作。

在文档加载功能上，您可以执行此操作。    //文档加载函数

$(function(){

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

这样你就可以继续使用你正在使用的文件夹，而不是改变任何东西。