Background Image Randomizer and Preloader

**KennyP** · 06-11-2014, 10:15 PM

Hi guys:

I'm using the following two scripts to preload and randomize the background image of a website's splash page.

For times when an image is slow to load, would you please show me how to display a 'loading.gif" against a

solid color background instead? I'd like to prevent the page content from displaying until the background image

has finished loading and is ready to display.

BTW, I tried scripts like queryLoader and jPreloader. They look good but are unreliable to work in all browsers,

like in IE8 in which they don't work at all.

Code:

<head>
<!-- BEGIN PRELOADER -->
<script type="text/javascript">
var image = new Image();
image .src = "/images/holidays/summer/1.jpg" , "/images/holidays/summer/2.jpg" , "/images/holidays/summer/3.jpg"
</script>
<!-- END PRELOADER -->

<!-- START RANDOM BACKGROUND IMAGE  -->
<script type="text/javascript"> 
var totalCount = 3;
function ChangeIt() {
var num =  Math.ceil( Math.random() * totalCount );
document.body.background = '/images/holidays/summer/'+num+'.jpg';
document.body.style.backgroundRepeat = "no-repeat";
}
</script>
<!-- END RANDOM BACKGROUND IMAGE  --> 
</head>

<body>
<script type="text/javascript"> 
ChangeIt();
</script>   
</body>

Splash page

Thanks

-Kenny

**vwphillips** · 06-14-2014, 01:38 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>

<img id="loading" src="http://www.vicsjavascripts.org/StdImages/loading.gif" />

<script type="text/javascript">
/*<![CDATA[*/

var ary=['http://www.vicsjavascripts.org/StdImages/0.gif','http://www.vicsjavascripts.org/StdImages/1.gif','http://www.vicsjavascripts.org/StdImages/2.gif','http://www.vicsjavascripts.org/StdImages/3.gif'];
 for (var src,z0=0;z0<ary.length;z0++){
  src=ary[z0];
  ary[z0]=new Image();
  ary[z0].src=src;
 }

function Change(a,ld){
 ld=document.getElementById(ld);
 ld?ld.style.visibility='visible':null;
 ChangeBG(a[Math.floor(Math.random()*a.length)],ld); // Math.floor(Math.random()*a.length)

}

function ChangeBG(i,ld){
 clearTimeout(ChangeBG.to);
 if (i.width<40){
  return ChangeBG.to=setTimeout(function(){ ChangeBG(i,ld); },200);
 }
 ld?ld.style.visibility='hidden':null;
 document.body.style.backgroundImage='url('+i.src+')';
 document.body.style.backgroundRepeat="no-repeat";
}

Change(ary,'loading');

/*]]>*/
</script>
</body>

</html>

**KennyP** · 06-14-2014, 11:26 PM

Thank you so much vwphillips.

Your code works brilliantly as seen in the test page.

However, when the internet connection is slower, the spinner disappears much before the background image actually displays.

Can the time factor of the spinner's display be increased until the background image is fully loaded?

Thanks again,

-Kenny

**vwphillips** · 06-15-2014, 12:00 PM

should not be needed but sett red comments

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>

<img id="loading" src="http://www.vicsjavascripts.org/StdImages/loading.gif" />

<script type="text/javascript">
/*<![CDATA[*/

var ary=['http://www.vicsjavascripts.org/StdImages/0.gif','http://www.vicsjavascripts.org/StdImages/1.gif','http://www.vicsjavascripts.org/StdImages/2.gif','http://www.vicsjavascripts.org/StdImages/3.gif'];
 for (var src,z0=0;z0<ary.length;z0++){
  src=ary[z0];
  ary[z0]=new Image();
  ary[z0].src=src;
 }

function Change(a,ld){
 ld=document.getElementById(ld);
 ld?ld.style.visibility='visible':null;
 ChangeBG(a[Math.floor(Math.random()*a.length)],ld); // Math.floor(Math.random()*a.length)

}

function ChangeBG(i,ld){
 clearTimeout(ChangeBG.to);
 if (i.width<40){  // (40) change this value suitable to your image
  return ChangeBG.to=setTimeout(function(){ ChangeBG(i,ld); },200);
 }
  document.body.style.backgroundImage='url('+i.src+')';
 document.body.style.backgroundRepeat="no-repeat";
ld?ChangeBG.to=setTimeout(function(){ ld.style.visibility='hidden'; },5000):null; // (5000) change this value suitable to your image
}

Change(ary,'loading');

/*]]>*/
</script>
</body>

</html>

**KennyP** · 06-15-2014, 07:30 PM

Thank you for your reply Vic.

With this second code, the spinner sometimes displays too long after a background image is fully loaded and already displaying.

I tried playing with the settings but I can't get them right. All the images are 960X540 and average file size of 50kb each. Would

you please suggest settings so that the spinner be made to disappear just when the background image appears?

Here's a test page using the second code.

Thanks,

-Kenny

**vwphillips** · 06-16-2014, 09:19 AM

you have not altered the values I marked in red

but you could try the(somewhat illegal code);

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
      <title></title>
    </head>

    <body>

    <img id="loading" src="http://www.vicsjavascripts.org/StdImages/loading.gif" />

    <script type="text/javascript">
    /*<![CDATA[*/

    var ary=['http://www.vicsjavascripts.org/StdImages/0.gif','http://www.vicsjavascripts.org/StdImages/1.gif','http://www.vicsjavascripts.org/StdImages/2.gif','http://www.vicsjavascripts.org/StdImages/3.gif'];

    function Change(a,ld){
     clearTimeout(Change.to);
     ld=document.getElementById(ld);
     ld?ld.style.visibility='visible':null;
     var i=new Image();
     i.onload=function(){
       document.body.style.backgroundImage='url('+i.src+')';
       document.body.style.backgroundRepeat="no-repeat";
       ld?Change.to=setTimeout(function(){ ld.style.visibility='hidden'; },50):null; // (5000) change this value suitable to your image
      }
     i.src=a[Math.floor(Math.random()*a.length)];
    }

    Change(ary,'loading');

    /*]]>*/
    </script>
    </body>

    </html>


</body>

</html>

**KennyP** · 06-17-2014, 12:30 AM

Thank you so much Vic. This third code you posted works the very best of the three.

With the red setting (below) at 0, the spinner stays up however long as an image takes to load. If otherwise an image loads quickly, the spinner just flashes on and disappears quickly.

This code is actually excellent as is, but, if the spinner can be made to not display at all for images that do load very quickly, this code would be absolutely better than perfect?

Code:

 <body>

    <img id="loading" src="http://www.vicsjavascripts.org/StdImages/loading.gif" />

    <script type="text/javascript">
    /*<![CDATA[*/

    var ary=['http://www.vicsjavascripts.org/StdImages/0.gif','http://www.vicsjavascripts.org/StdImages/1.gif','http://www.vicsjavascripts.org/StdImages/2.gif','http://www.vicsjavascripts.org/StdImages/3.gif'];

    function Change(a,ld){
     clearTimeout(Change.to);
     ld=document.getElementById(ld);
     ld?ld.style.visibility='visible':null;
     var i=new Image();
     i.onload=function(){
       document.body.style.backgroundImage='url('+i.src+')';
       document.body.style.backgroundRepeat="no-repeat";
       ld?Change.to=setTimeout(function(){ ld.style.visibility='hidden'; },0):null; // (5000) change this value suitable to your image
      }
     i.src=a[Math.floor(Math.random()*a.length)];
    }

    Change(ary,'loading');

    /*]]>*/
    </script>
    </body>

**vwphillips** · 06-17-2014, 09:55 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
      <title></title>
    </head>

    <body>

    <img id="loading" src="http://www.vicsjavascripts.org/StdImages/loading.gif" />

    <script type="text/javascript">
    /*<![CDATA[*/

    var ary=['http://www.vicsjavascripts.org/StdImages/0.gif','http://www.vicsjavascripts.org/StdImages/1.gif','http://www.vicsjavascripts.org/StdImages/2.gif','http://www.vicsjavascripts.org/StdImages/3.gif'];

    function Change(a,ld){
     clearTimeout(Change.to);
     ld=document.getElementById(ld);
     ld?ld.style.visibility='visible':null;
     var i=new Image();
     i.onload=function(){
       ld.style.visibility='hidden';
       document.body.style.backgroundImage='url('+i.src+')';
       document.body.style.backgroundRepeat="no-repeat";
      }
     i.src=a[Math.floor(Math.random()*a.length)];
    }

    Change(ary,'loading');

    /*]]>*/
    </script>
    </body>

    </html>


</body>

</html>

**KennyP** · 06-17-2014, 03:52 PM

Thank you again Vic!

The latest code above works just as well as the previous (third) code you posted.

The spinner however still flashes on and off quickly just before all images display.

Test page here.

Can a setTimeout be used to delay the spinner before it begins to display?

Code:

<img id="loading" src="http://www.vicsjavascripts.org/StdImages/loading.gif" />

**KennyP** · 06-18-2014, 06:41 AM

Vic:

I noticed that when an image loads quickly there is no flashing on and off of the spinner at all.

A very quick flash of the spinner is seen only if the page is refreshed and a new image loads,

which I think is just fine.

As far as I'm concerned this code is working perfectly and I'm very grateful to you for your help.

With kind people like you around God always has the instruments by which He cannot love us any less.

Many thanks,

-Kenny

Thread: Background Image Randomizer and Preloader

Thread Tools

Search Thread

Background Image Randomizer and Preloader

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

Similar Threads

Problem with Preloader and Explorer

Problem with Preloader (with Progress Bar) II

Image Preloader

preloader and onMotionFinished problem

Image Preloader II

Bookmarks

Bookmarks

Posting Permissions