Question

我有一个<body style="<?php include("gallery.php"); ?>"，其中gallery.php包含一个随机的图像数组，每次重新加载时都会回显URL。

我想要一个按钮来刷新身体的背景图像。

我目前能够重新加载图像，因为新的URL会被回显。

EG：

$(".refresh").click(function() {
    $("body").css("background-image", "url(<?php include("gallery.php"); ?>)");
});

但是在脚本中包含gallery文件后，它始终是相同的URL。

修改我的PHP如下：

$bg = array(
    array( "url" => "url_1" ),
    array( "url" => "url_2" ),
    ...
);


for ($i=0;$i<1;$i++) {
    $id = array_rand($bg);
    echo "{$bg[$id]['url']}";
    unset($ad[$id]);
};

Answer 1

这将采用另一种方式，gallery.php可以输出图像（而不仅仅是网址），因此您可以像这样访问gallery.php：

$(".refresh").click(function() { 
    $("body").css("background-image", 'url("http://www.mysite.com/gallery.php?'+Math.random()+'")'); 
});

使用Math.random()将传递一个随机数以避免缓存。

所以在gallery.php你有类似的东西：

$bg = array(
    array( "url" => "url_1" ),
    array( "url" => "url_2" ),
    ...
);

shuffle($bg); // Random order

echo file_get_contents($bg[0]['url']);
//instead of echo $url;

Answer 2

$(".refresh").click(function() { 
    $.get('gallery.php', function(data) {
        $("body").css("background-image", "url('"+data+"')"); 
    }
});

PHP是服务器端脚本语言，Javascript是客户端脚本语言。我们不能像你使用的那样使用它们。但是你可以从客户端向服务器发送请求以使用URL来促进身体。

Answer 3

IMO Ajax过度使用并通过php脚本管理所有图像会产生不必要的内存开销。对于非常大的图像，它甚至可能在您的网络服务器上造成内存问题。最好的方法是将所有图像放在javascript数组中，如已经建议的那样。您可以让gallery.php输出图像的URL数组。

[ 'http://url1/', 'http://url2', ... ] // etc

然后你可以在你的文件中调用它：

<script type="javascript">
  var backgroundImages = <?php include("gallery.php"); ?>;
  function refresh() {
    $("body").css("background-image", "url(" + backgroundImages[Math.round(Math.random() * backgroundImages.length)] + ")"); 
  }
  $(function() { refresh(); });
  $(".refresh").click(refresh);
</script>

使用jQuery从PHP文件重新加载背景图像

3 个答案: