Question

我试图给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脚本检测“document-ready”事件，并在触发该事件时，对将运行您需要的脚本的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;
}

只下载了一张背景图片，然后只有当图片已加载等时才能执行细微淡入等功能。

使用jquery / ajax运行小型PHP脚本

0 个答案: