• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 784
  • Last Modified:

Remove the flash white during the background image transition

Visit the link shown below.....

http://visitpensacola.com.saturn.milesmedia.com/

Background Images: up to 4 background images, that rotate on their own,
rotation stops when the user interacts/searches/clicks a nav item.
***I've got the background rotating and stopping, but there's a flash of
white between them while it loads that I haven't been able to clear out. I
believe I need to preload the images, but I'm not certain just how to do
that to prevent the flash of white.
var bgs = new Array

//Above array consists of all the background jpeg's

  var bgIndex = -1; // iteration
  var switchBG; // timer
  var delay = 8000; // milliseconds
  function changeBG()
  {
    bgIndex++;
    if(bgIndex>=bgs.length) bgIndex=0;
    $('#backgroundDiv').fadeOut(100); 
    $('#backgroundDiv').css('background-image','url('+bgs[bgIndex]+')');
    $('#backgroundDiv').fadeIn(1000);
    clearTimeout(switchBG);
    switchBG = setTimeout("changeBG();",delay);
  }

  function stopChangingBG()
  {
    clearTimeout(switchBG);
  }

//});
  $(document).ready(function(){
  	var delay = 8000; // milliseconds
    switchBG = setTimeout("changeBG();",delay);
    changeBG();
    $(document).bind('mousedown',stopChangingBG);
  });

Open in new window

0
Dattu
Asked:
Dattu
  • 2
1 Solution
 
Ray PaseurCommented:
You might consider a flash animation.  Not a very good answer, unless you're interested in flash development but it is guaranteed to handle the issue.

This is just a guess, but have you tried making the fade-out longer and the fade-in shorter?
0
 
Ray PaseurCommented:
Nice photos, by the way!
0
 
geertplaisierCommented:
What I would do, is the usage of multilple background DIVS.
For example #backgroundDiv1 and #backgroundDiv2, etc.
You can than fade one div to the other. That way, the image does not have to be loaded once the other div has faded out.
Your function could be something like this:

function changeBG()
  {
    $('#backgroundDiv'+bgIndex).fadeOut(100);
    bgIndex++;
    if(bgIndex>=bgs.length) bgIndex=0;
    $('#backgroundDiv'+bgIndex).fadeIn(1000);
    clearTimeout(switchBG);
    switchBG = setTimeout("changeBG();",delay);
  }

I hope you understand what I mean!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now