使用jQuery从PHP文件中重新加载背景图像
[英]Reload background-image from PHP file using jQuery
问题描述
I have a <body style="<?php include("gallery.php"); ?>" where gallery.php holds a random array of images, echoing the URL upon each reload. 
我有一个<body style="<?php include("gallery.php"); ?>" ，其中gallery.php拥有一个随机的图像数组，每次重新加载时都会回显URL。
I would like to have a button to refresh the background image of the body. 我想要一个按钮来刷新身体的背景图像。
I currently am able to do one reload of the image, since the new URL is echoed. 由于回显了新的URL，因此我目前能够重新加载图像。
EG: 例如：
$(".refresh").click(function() {
$("body").css("background-image", "url(<?php include("gallery.php"); ?>)");
});
But after the inclusion of the gallery file in the script, it is always the same url. 但是在脚本中包含Gallery文件之后，它始终是相同的url。
EDIT My PHP is as follows: 编辑我的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]);
};
3 个解决方案
解决方案1
2 已采纳 2013-01-28 07:52:26
It would be in an another way and gallery.php could outputs an image (not just a url), So you can access gallery.php like this : 这将是另一种方式， gallery.php可以输出图像（而不仅仅是URL），因此您可以像这样访问gallery.php ：
$(".refresh").click(function() {
$("body").css("background-image", 'url("http://www.mysite.com/gallery.php?'+Math.random()+'")');
});
Using Math.random() will passes a random number to avoid caching. 使用Math.random()将传递一个随机数以避免缓存。
So in gallery.php you have something like : 因此，在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;
解决方案2
1 2013-01-28 07:52:34
$(".refresh").click(function() {
$.get('gallery.php', function(data) {
$("body").css("background-image", "url('"+data+"')");
}
});
PHP is server side scripting language and Javascript is client side scripting language. PHP是服务器端脚本语言，而Javascript是客户端脚本语言。 We can't use them like you were using. 我们不能像您正在使用的那样使用它们。 But you can send request from client to server to faciliate body with URL. 但是，您可以将请求从客户端发送到服务器，以方便使用URL的正文。
解决方案3
0 2013-01-28 08:15:00
IMO Ajax is overkill and piping all images through a php script creates unnecessary memory overhead. IMO Ajax过度使用，通过php脚本传递所有图像会产生不必要的内存开销。 For very large images it could even create memory problems on your webserver. 对于非常大的图像，它甚至可能在您的Web服务器上造成内存问题。 The best method would be to put all images in a javascript array, as already suggested. 最好的方法是将所有图像放在javascript数组中，如已经建议的那样。 You can have gallery.php output an array of URLs to the images. 您可以使gallery.php输出指向图像的URL数组。
[ 'http://url1/', 'http://url2', ... ] // etc
Then you can call it in your file like this: 然后，您可以像这样在文件中调用它：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.