Jquery fadeIn et fadeOut de la page génère une page blanche flash entre les chargements

Question

J'ai un problème avec l'utilisation de fadeIn et fadeOut de mes pages web en utilisant jQuery. Lorsque le script s'exécute, ma page s'efface, puis j'obtiens un flash blanc et ma nouvelle page s'affiche en fondu. S'agit-il d'un effet typique de jQuery ? C'est un problème pour moi parce que le site est très sombre avec un arrière-plan noir, donc c'est assez dérangeant.

Voici mon script que j'utilise pour exécuter ces effets. Est-ce qu'il pourrait s'agir d'un problème de redirection de la page qui génère cela ? Existe-t-il un moyen plus efficace de procéder ?

$(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;
    }

});

Merci d'avance. J'apprécie l'aide que vous m'apportez.

Patrick

Answer 1

Lorsque l'animation fadeOut est terminée, elle définit display:none sur le corps. C'est probablement la source de votre flash blanc. Essayez d'insérer votre page entière dans une div à l'intérieur du corps de la page, et de faire disparaître cette div.

Ou essayez d'appliquer ce CSS :

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

Answer 2

Le flash blanc se produit parce que, dans les quelques instants qui précèdent l'exécution de la fonction .ready(), l'élément body s'affiche. Ce phénomène s'aggrave sur les connexions lentes.

Ce que vous pourriez essayer de faire à la place, c'est de superposer une div au dessus de votre corps, puis de faire disparaître cette div. Mais les résultats varieront toujours en fonction de la vitesse du navigateur/réseau.

En CSS :

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

Et en JS :

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

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

C'est quand même assez grave. Lorsque vous chargez une nouvelle page, vous donnez une grande partie de l'expérience au navigateur sur la façon dont il décide de passer à la page suivante.

Vous pouvez envisager une transition via AJAX :

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

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

Answer 3

Avez-vous essayé d'utiliser des valeurs de fondu-enchaîné plus lentes ou plus rapides ? Il semble que l'utilisation d'une vitesse plus lente puisse aider, mais je ne l'ai pas testé et je ne peux donc pas l'affirmer avec certitude. Vous pouvez également essayer d'ajouter le pseudo-sélecteur :visible à l'appel afin de ne sélectionner que les éléments actuellement visibles. Exemple :

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

Answer 4

Je sais que cette question est déjà ancienne, mais je viens de rencontrer le même problème et je vais y apporter mon grain de sel. Il s'agissait bien de l'élément que je faisais apparaître en fondu (une div avec une image d'arrière-plan qui était chargée paresseusement - la div entière était intégrée en fondu).

Ma solution a été de le placer dans sa propre div de superposition. Le problème était alors résolu.

Ma div de recouvrement, en tant que premier enfant de l'élément sur lequel j'ai utilisé le chargement paresseux :

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

La feuille de style CSS pour la 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;
}