[jQuery] Faire disparaître une DIV en fondu après chargement

[MGZ] Shralldam · 12 Septembre 2009

Bonjour à tous,

Je suis en train de finaliser le développement d'un site pour un client, et j'utilise jQuery pour plusieurs aspects du site. Étant donné que la page d'accueil (après avoir choisi la langue) se charge à des vitesses variables selon les configurations, j'ai ajouté une DIV avec un GIF animé représentant une barre de progression, DIV qui doit disparaître en fondu une fois la page chargée.

Hélas, cette DIV disparaît bien plus tôt que je ne le désire. Je ne connais pas JavaScript sur le bout des doigts, donc voici bout de code actuel (dans la balise HEAD de la page) :

Bloc de code:

<script type="text/javascript">
	$(document).ready(function () {
		$('#loader').fadeOut("slow")
	});
</script>

J'ai donc une DIV (id="loader") qui disparaît en fondu comme souhaité, mais pas au bon moment.

Le site est visible ici.

Maintenant, en y réfléchissant, je me demande si c'est vraiment bien utile d'afficher ce message de progression, je me tâte

Merci par avance pour vos conseils !

dmo95 · 12 Septembre 2009

Deux possibilité s'offre à toi :

1°) Mettre un setTimout('yourFunction()', timeInMilliSeconde);
Inconvénient de cette méthode c'est que la barre de chargement aura un temps fixe et là encore selon les configurations (bande passante) ton site sera pas encore chargé que la barre disparaîtra.

2°)Réaliser un chargement dynamique. Je ne me suis jamais attelé à cette solution (comme tout le monde le sais les informaticiens sont fainéants...), mais j'optais plutôt pour la première. Bien sur celle-ci est bien plus intéressante, car le temps de visibilité de la bar de progression dépendra de chaque configuration. Pour se faire des plugin jQuery existe.

Je te propose de jeter un coup d'oeil par ici.

enjOy with jQuery

[MGZ] Shralldam · 13 Septembre 2009

Merci de ta réponse !

Très intéressant ton lien ! Peut-être que j'y trouverai un début de solution

Sinon je crois effectivement qu'un setTimeout ne me conviendra pas. J'ai étudié des possibilités avec blockUI (un plug-in pour jQuery), mais ça me fait encore un fichier de plus à charger avec la page et je suis convaincu que je peux résoudre le problème avec jQuery seul.

J'avais également fait un essai avec

Bloc de code:

<body onload="document.getElementById('loader').style.display = 'none';">

ça fonctionne très bien, mais la DIV disparaît d'un coup (normal, vu qu'ici on utilise les CSS), je n'ai plus le joli fondu… :rose:

Anonyme · 13 Septembre 2009

Peut-être un truc comme ça devrait marcher (à tester) :

Bloc de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Progressbar</title>
    <meta name="description" lang="fr" content="chargement de page avec progressbar" />
    <style type="text/css" media="screen">
        body {
            font-size: 90%;
            font-family: arial, helvetica, sans-serif;
        }
        h1 {text-align: center; color: #f00;}
        /*valeurs par défaut*/
        #onload {
            position: absolute;
            left: -5000px;
            top: -5000px;
            background-image: none;
            }
        #content {
            width: 800px;
            margin: auto;            
        }
        /*valeurs pendant le chargement*/
        .isOnload #onload {
            position: static;
            background: #000 url(progressbar.gif) center center;
            width: 600px;
            height: 400px;
            margin: auto;
            }
        .isOnload #content {
            position: absolute;
            left: -5000px;
            top: -5000px;
        }
    </style>
    <script type="text/javascript">
        document.documentElement.className+=" isOnload";
    </script>
</head>

<body>
    <div id="onload">
        
    </div>
    <div id="content">
        <h1>Titre du site</h1>
        <p>contenu blablabalabla&#8230;
        
        
        
            &#8230;
            &#8230;
            </p>
    
    </div>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
            $(document).ready( function () {
                $("html").removeClass("isOnload");
            });
    </script>
</body>
</html>

Bon les css seraient mieux dans un fichier externe.

Explications :

On définit dans les css une classe isOnload avec son impact sur les div content et onload. Pour des raisons d'accessibilité on ne cache pas les div mais on les place en dehors de la page.
Un fonction en javascript crée une classe sur l'élément html avant que le dom complet soit chargé.
Les accès à jquery et la fonction qui enlève la classe sur l'élément html sont placés juste avant la fin du body.
Pour le fondu faut mettre dans la fonction de fin un hide avant de l'appliquer.

Ça devrait marcher…

momo-fr · 13 Septembre 2009

Franchement vu ta page c'est superfétatoire ce truc de chargement, tu construits ta page et tu laisses ça s'afficher avec le temps qu'il faut je dis cela en regard du site présenté, où, me semble-t-il, la démarche de présentation et de hiérarchie (visuelle et textuelle) est "bâclée".

Une bonne page d'accueil indique l'essentiel en 3 à 4 secondes pour le visiteur, au delà tu pers en pertinence de lecture et donc d'intérêt pour le visiteur.

Tu y gagnera en lisibilité et compréhension visuelle, si l'ordonnancement des choses est bien fait le chargement de la page fera la même chose que ta barre

AMHA

Anonyme · 13 Septembre 2009

Ah oui j'avais pas vu le lien sur la page en ligne :rose: :siffle:

C'est vrai qu'elle est rapide à charger (connexion 4mbits), je ne vois pas pourquoi faire une barre de progression

dmo95 · 13 Septembre 2009

Chez moi il y a quand même pas mal de chose qui charge, notamment le background, les boutons en bas à droites, ainsi que les images couleurs de ces boutons... à voir.

Une petit question quel est le plugin utilisé dans la section vidéo pour la visualisation de celles-ci ?

Merci.

[MGZ] Shralldam · 13 Septembre 2009

Merci pour vos interventions !

Pour le plugin, il s'agit de prettyPhoto de Stéphane Caron. Tous les plugins utilisés par le site sont indiqués en commentaires dans la balise HEAD de la page

Sinon pour le reste, comme je l'ai dit je me pose aussi la question de l'utilité de cette barre, mais sur certaines machines j'ai constaté des temps de chargement très variés, et à la manière des sites en Flash où il y a un chargement en progression (pour informer les visiteurs qu'il se passe quelque chose et qu'ils ne doivent pas se barrer), je me suis demandé si ça pouvait être utile. Maintenant, je ne suis pas sûr de son intégration définitive. Au pire, j'aurai appris des choses que je pourrai réutiliser pour un autre projet

momo-fr a dit:
() je dis cela en regard du site présenté, où, me semble-t-il, la démarche de présentation et de hiérarchie (visuelle et textuelle) est "bâclée".

Je me base avant tout sur ce que le client désire Vu son caractère un peu "désorganisé" je trouve qu'on s'en est pas mal sorti. Maintenant il est clair que certaines choses sont perfectibles :zen:

[jQuery] Faire disparaître une DIV en fondu après chargement

[MGZ] Shralldam

Gendarmette déchue

dmo95

Membre actif

[MGZ] Shralldam

Gendarmette déchue

Anonyme

Invité

momo-fr

Ancien Aveyronnais

Anonyme

Invité

dmo95

Membre actif

[MGZ] Shralldam

Gendarmette déchue

Sujets similaires