CODEWITHSUNDEEP
jqueryperformancefadeinfadeout
Patrick Ryan
Patrick Ryan

Reputation: 53

Jquery fadeIn and fadeOut of page is generating a white page flash between loads

I'm having an issue using the fadeIn and fadeOut of my web pages using jQuery. When the script runs my page fades out and then I get a white flash and then my new page fades in. Is this typical for this jQuery effect? It's kind of an issue for me because the site is very dark with a black background so it's quite jarring.

Below is my script that I'm using to run these effects. Could it be an issue with the page redirecting that is generating this? Is there a more effective way of doing this?

$(document).ready(function() {

    $("body").css("display", "none");

    $("body").fadeIn(2000);

    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);      
    });

    function redirectPage() {
        window.location = linkLocation;
    }

});

Thanks in advance guys. Appreciate the help.

Patrick

Upvotes: 3

Views: 5352

Answers (4)

dmgig
dmgig

Reputation: 4568

I know this is rather old, but I just had the same issue and will put my two cents in. It was definitely that the element I was fading in (a div with a background image which was being lazyloaded - the whole div was being faded in).

My solution was to put it in its own overlay div. The problem was then solved.

My overlay div, as a first child of the element I had been using the lazy load on:

<div 
  class="bgimg-overlay lazy"
  style="back"
  data-original="<?=$tpldir?>/img/LAST_FRAME_CROPPED.PNG"></div>

The CSS for the div:

.bgimg-overlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Upvotes: 0

Wheeyls
Wheeyls

Reputation: 1012

The white flash is happening because in those few moments before the .ready() function is fired, your body element is showing. This will get worse on slow connections.

What you might try to do instead is overlay a div on top of your body, and then fade that div out. But your results will still vary depending on browser/network speed.

In CSS:

.overlay {
  display: block;
  background-color: #000;
  position: fixed;
  width: 100%; 
  height: 100%;
  z-index: 999;
}

And in JS:

$(document).ready(function () {
  $('.overlay').fadeOut();

  $("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $('.overlay').fadeIn(1000, redirectPage);    
  });
});

This is still pretty bad. When you load a new page you're giving a lot of the experience away to the browser on how it decides to transition to the next page.

You might consider transitioning via AJAX instead:

function transition() {
  var loadContent = $.get('/url-to-content');

  $('.overlay').fadeIn(1000, function () {
    loadContent.then(function (data) { 
      $('.content-div').html(data);
      $('.overlay').fadeOut(1000);
    });
  });
}

Upvotes: 1

pinmonkeyiii
pinmonkeyiii

Reputation: 191

Have you tried using slower or faster fadeOut values? It seems like using a slower speed may help, but I haven't tested it so I can't say for sure. Could also try adding the pseudo selector :visible to the call so that it only selects currently visible items. Example:

$("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body:visible").fadeOut(1000, redirectPage);      
    });

Upvotes: 0

Casey Flynn
Casey Flynn

Reputation: 14038

When the fadeOut animation completes it will set display:none on body. This is probably the source of your white flash. Try wrapping your entire page inside a div within the body, and fading that div out.

Or try applying this CSS:

html,body {
  background-color:#000;
}

Upvotes: 2

Related Questions