I want to load the background first using jquery but my code doesn't seem to work
<p>Below is the code. but i don't know what the problem is. I have a array of background images after each load it keeps changing[This is my intention]. Now i planned to use javascript to load the background first but my code doesn't work though it works with regular style tags. I don't know what am doing wrong here. below are the code.</p>

<p><strong>This below code works but takes time to load the image</strong></p>

<pre><code>&lt;?php
  $bg = array('login_bg.jpg', 'login_bg2.jpg', 'login_bg3.jpg', 'login_bg4.jpg', 'login_bg5.jpg', 'login_bg6.jpg', 'login_bg7.jpg', 'login_bg8.jpg', 'login_bg9.jpg' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = $bg[$i]; // set variable equal to which random filename was chosen
?&gt;



&lt;style&gt;

    body{
    background-image:url("&lt;?php echo $base_url; ?&gt;assets/images/&lt;?php echo $selectedBg; ?&gt;");
    }

    &lt;/style&gt;
</code></pre>

<p><strong>This code doesn't work. I'm doing this because i want to load the BG first.</strong></p>

<pre><code>&lt;?php
  $bg = array('login_bg.jpg', 'login_bg2.jpg', 'login_bg3.jpg', 'login_bg4.jpg', 'login_bg5.jpg', 'login_bg6.jpg', 'login_bg7.jpg', 'login_bg8.jpg', 'login_bg9.jpg' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?&gt;

&lt;script&gt;
    var img1 = new Image();

    img1.src="&lt;?php echo $base_url; ?&gt;assets/images/&lt;?php echo $selectedBg; ?&gt;";


    $('body').css('background-image', 'url('+ img1.src + ')');

&lt;/script&gt;
</code></pre>