javascript - Change background image on page refresh - Stack Overflow

admin管理员组

文章数量:1325140

I currently have some php that changes the background image of a div everytime the page is refreshed.

In the head of my HTML I have this

<?php 
$bg = rand(1, 6); 
$bgchange = $bg.".jpg"; 
?>

and then this

<style type="text/css">
.cover {
  background-image: url('../img/backgrounds/<?php echo $bgchange; ?>');
}
</style>

As you can see this is a very simple bit of php it does do the job but I am having problems when the site is first loaded on a puter or if the internet is slow where the image fails to load.

Any javascript guys that can remend a solution to this I would greatly appreciate, I'm also thinking javascript will be better as the image can 'fade' in etc. I am referencing jquery-1.10.2 in my project.

P.S. Solution does not have to be javascript if anyone knows how to improve my php code or can offer a reason why the code fails sometimes, that would be really helpful.

I currently have some php that changes the background image of a div everytime the page is refreshed.

In the head of my HTML I have this

<?php 
$bg = rand(1, 6); 
$bgchange = $bg.".jpg"; 
?>

and then this

<style type="text/css">
.cover {
  background-image: url('../img/backgrounds/<?php echo $bgchange; ?>');
}
</style>

As you can see this is a very simple bit of php it does do the job but I am having problems when the site is first loaded on a puter or if the internet is slow where the image fails to load.

Any javascript guys that can remend a solution to this I would greatly appreciate, I'm also thinking javascript will be better as the image can 'fade' in etc. I am referencing jquery-1.10.2 in my project.

P.S. Solution does not have to be javascript if anyone knows how to improve my php code or can offer a reason why the code fails sometimes, that would be really helpful.

• javascript
• php
• jquery
• html
• css

Share Improve this question Follow edited Nov 10, 2013 at 11:53 Tobias 7,77111 gold badge2929 silver badges4444 bronze badges asked Nov 10, 2013 at 11:42 user2078845user2078845 60922 gold badges88 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

First create an array of images:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];

Then, set a random image as the background image:

 $('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() *      images.length)] + ')'});

That should work no problem.

you can do (and should) do this action in js.

on the document load function you can do this. //document load function

$(function(){

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

and this way you can keep using the folders you are using and not change anything.

本文标签： javascriptChange background image on page refreshStack Overflow