PDA

View Full Version : 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.



<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 (http://www.guyarseneau.com/welcome-summer-test.php)


Thanks

-Kenny

vwphillips
06-14-2014, 01:38 PM
<!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 (http://www.guyarseneau.com/welcome-summer-test-1.php).

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


<!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 (http://www.guyarseneau.com/welcome-summer-second-code.php).

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);


<!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 (http://www.guyarseneau.com/welcome-summer-third-code.php) 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?


<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
<!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. (http://www.guyarseneau.com/welcome-summer-fourth-code.php)

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


<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

KennyP
06-19-2014, 06:39 AM
Vic, please, if I may, I was just advised that in IE8 the images, which are 960X540, do not stretch to fit the screen.

Can the stretching to fit the screen be added to your code?

Thanks,

-Kenny

KennyP
06-19-2014, 07:47 PM
I tried several things, including the addition of the following (highlighted red) to your code but none of it has worked in IE8...


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

var ary=['/images/summer/1.jpg' , '/images/summer/2.jpg' , '/images/summer/3.jpg'];
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";
document.body.style.backgroundSize = "cover";
}
i.src=a[Math.floor(Math.random()*a.length)];
}

Change(ary,'loading');

/*]]>*/
</script>

I also tried the following...

.bgchange {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

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

var ary=['/images/summer/1.jpg' , '/images/summer/2.jpg' , '/images/summer/3.jpg'];
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";
document.body.className = 'bgchange';
}
i.src=a[Math.floor(Math.random()*a.length)];
}

Change(ary,'loading');

/*]]>*/
</script>

Can resizing to fit the screen be made to work even in IE8?

Thanks,

-Kenny