Jouer l'animation après chargement

Bonjour,

J'ai un petit soucis avec une animation JS. Elle marche très bien sauf que l'animation se joue après le chargement de la page, normal me direz-vous, sauf que je préfèrerais qu'elle se joue une fois que les éléments de la page sont pré-chargés. J'ai utiliser un onload mais il m'affiche les éléments déjà chargés, puis joue l'animation quand le dernier élément est chargé.

Pour l'instant j'ai repris un simple

$(document).ready(function())

en attendant. Sauriez-vous comment je pourrais manipuler ce code pour obtenir une animation plus fluide des éléments ?

$(document).ready(function() {
           
            $('div#outer-container').fadeOut(0, function(){
                $(this).slideDown(5000);
                $('.page-book').fadeIn(5000);
            });

            
            $('.slidea').click(function(e){
                e.preventDefault();
                var $href = $(this).attr('href');
                $('div#outer-container').slideUp(1000, function(){
                	$('this').fadeOut(500);
                    window.location = $href;
                });
            });

        });

Merci pour vos retours et explications.

En fait, le mieux est de n'afficher la page qu'une fois la totalité du continu soit chargé, ainsi ton animation aura déjà commencé avant que la page soit "vue". Tu peux cacher cette page par une div qui prends la totalité de l'écran et qui disparaîtrait à ton $(document).ready(); Cette div pourrait inclure une barre de progression par exemple comme cela se fait sur de nombreux sites.

C'est une suggestion, il y a d'autres moyens surement

Cépabêtdutoo Merci pour la petite astuce, je vais tester dès demain! Bonne soirée.

S'il y a d'autres moyens je suis aussi curieuse de les connaître, c'est toujours enrichissant!