Page longue à charger : afficher la progression

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par OTP, 12 Juillet 2008.

  1. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Bonjour,

    Sur la V3 de mon 3W, j'ai plusieurs pages assez lourdes. J'aimerais que se charge déjà le début de la page (tout sauf une maps GG), rapidement, ainsi qu'un indicateur qui montre le % de chargement du reste (la partie lourde, la maps), qui s'afficherai finalement une fois arrivée à 100%

    Comment peut-on faire ça ?

    Merci d'avance,

    Michaël
     
  2. Chacho
    Chacho WRInaute discret
    Inscrit:
    16 Septembre 2007
    Messages:
    72
    J'aime reçus:
    0
    Salut,

    Perso, j'utilise mootools comme librairie javascript et si j'étais dans ton cas, pour charger la map seulement à la fin, j'utiliserais ( j'en ai pas eu besoin encore mais je garde ça dans ma hotte )
    http://docs.mootools.net/Plugins/Assets
    qui te permet de charger dynamiquement javascript, css et images.
    Après pour le % je sais pas..
     
  3. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Ca à l'air intéressant, mais je ne vois pas trop comment adapter ça à une GG maps.
    (Et en plus je n'y connais rien en js).
    Tu ferais ça comment ?
     
  4. j-mi
    j-mi WRInaute passionné
    Inscrit:
    17 Mai 2005
    Messages:
    1 753
    J'aime reçus:
    0
    dans les mods phpBB y a un script pour afficher une image durant le temps de chargement de la page

    j'ai aussi un bout de js dans mes foufes
    je ne sais meme pas si y a pas un post dans mon www

    tu devrais t'inspirer de ce genre de menu , ainsi tu charges pas tout d'un coups
    *http://dev.developpements.org/presentations-titres-services.html

    prends le script ;)

    le truc c'est des appels html via ajax
    c tout simple , tu a deux div a respecter
    la div du contenu et la div du menu
    les appels javas dans le header html , et creer des pages qui se noment article

    si je suis trop zarb sur le post on peux en discuter en pv ;)
     
  5. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Ca ne marche pas sous FF !
     
  6. j-mi
    j-mi WRInaute passionné
    Inscrit:
    17 Mai 2005
    Messages:
    1 753
    J'aime reçus:
    0
    tu est sur ? chez moi ça marche

    fais pas attention a la colone d'extreme droite, la effectivement c mort en ff

    mais le reste marche sur tout normalement
     
  7. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Ok, j'y retourne !
     
  8. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    J'ai cherché un truc plus simple et trouvé ça :

    Code:
    <script type="text/javascript">
    onload=function(){
    document.body.removeChild(document.getElementById("mess"));
    }
    </script>
    Avec :

    Code:
       <h1 id="mess">
          Veuillez patienter...
       </h1>
    Mais ça ne marche que ci le h1 est juste après le body.

    Comment pourrai-je modifier le code pour pouvoir placer le h1 où je veux ?
     
  9. guardatak
    guardatak Nouveau WRInaute
    Inscrit:
    13 Juillet 2008
    Messages:
    11
    J'aime reçus:
    0
    onload=function(){
    document.all.mess.style.visibility = "hidden";
    }

    Essaie, on sait jamais :)
     
  10. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Tu veux cacher quoi ?
     
  11. guardatak
    guardatak Nouveau WRInaute
    Inscrit:
    13 Juillet 2008
    Messages:
    11
    J'aime reçus:
    0
    La balise <h1>
    (voir message au dessus complété)
     
  12. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Ok.
    Pas de souci à mettre des hidden avec GG qui n'aime pas ça ?
     
  13. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Le message ne s'efface pas.
     
  14. guardatak
    guardatak Nouveau WRInaute
    Inscrit:
    13 Juillet 2008
    Messages:
    11
    J'aime reçus:
    0
    Mais si ça marche !

    <script ...>
    function cache()
    {
    document.all.mess.style.visibility = "hidden";
    }
    </script>

    <body onload="javascript:cache();">

    <h1 id="mess">TEXTE A CACHER A LA FIN DU CHARGEMENT</h1>

    Une autre piste plus complète est là, je te laisse analyser le code source : http://www.easy-script.com/exemple/dhtml_as_ex1/ex.html
     
  15. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Ah, ok, comme ça.
    Je vais prendre ton script, il me va.
    Merci !
     
  16. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Je dois être un boulet, le texte reste encore en place...
     
  17. guardatak
    guardatak Nouveau WRInaute
    Inscrit:
    13 Juillet 2008
    Messages:
    11
    J'aime reçus:
    0
    Grumph, oui déso effectivement je fais toujours tout sous IE ! :lol:

    Voilà la version multi, qui décoiffe !

    Code:
    <style type="text/css" media="all">
    .cachediv{
    	visibility: hidden;
    	overflow: hidden;
    	height: 1px;
    	margin-top: -1px;
    	position: absolute;
    }
    </style>
    <script type="text/javascript">
    function cache(divID)
    {
    	if ( document.getElementById && document.getElementById( divID ) )
    	{
    		Pdiv = document.getElementById( divID );
    		PcH = true;
    	}
    	else if ( document.all && document.all[ divID ] )
    	{
    		Pdiv = document.all[ divID ];
    		PcH = true;
    	}
    	else if ( document.layers && document.layers[ divID ] )
    	{
    		Pdiv = document.layers[ divID ];
    		PcH = true;
    	}
    	else
    	{
    		PcH = false;
    	}
    	if ( PcH )
    	{
    		if(Pdiv.className == 'cachediv')
    		{
    			Pdiv.className = '';
    		}
    		else{
    			Pdiv.className = 'cachediv';
    		}
    	}
    }
    </script>
    <body onLoad="javascript:cache('chargement');">
    	<div id="chargement">TEXTE DE CHARGEMENT</div>
    </body>
    
     
  18. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Rho le vilain ! ;)

    Merci, je vais tester.
     
  19. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 580
    J'aime reçus:
    3
    Ok, ça marche, merci.
     
Chargement...
Similar Threads - longue charger afficher Forum Date
Page Nouvelle page d'accueil longue à charger, chute du ref Problèmes de référencement spécifiques à vos sites 15 Décembre 2007
Page d'accueil longue à charger, nombre de hits importants Administration d'un site Web 31 Mars 2007
Page longue à charger à cause de code javascript ? Administration d'un site Web 4 Septembre 2006
La plus longue sous-séquence palindromique Développement d'un site Web ou d'une appli mobile Mercredi à 12:40
Se positionner sur la longue traine / courte traine Débuter en référencement 14 Novembre 2022
référencement site en anglais : indexation plus longue Référencement international (langues, pays) 13 Mai 2022
Une longue page ou plusieurs pages ? Référencement Google 17 Mars 2022
FAQ et longueur du contenu Référencement Google 20 Octobre 2021
Faut-il découper une (bonne) page trop longue ? Débuter en référencement 2 Juillet 2021
Mots-clés longue traîne algorithme moteur de recherche Rédaction web et référencement 20 Avril 2021
Longue traîne et rédaction web Rédaction web et référencement 11 Mars 2021
Présentation résultats de recherche : description longue au survol souris Référencement Google 15 Décembre 2020
Indexation longue depuis quelques jours :/ Problèmes de référencement spécifiques à vos sites 20 Novembre 2019
Indexation longue / Aucune visibilité Google Actualité Crawl et indexation Google, sitemaps 26 Septembre 2019
Longueur des mots-clefs et Tags Débuter en référencement 20 Mai 2019
Question autour de la longue traine Rédaction web et référencement 20 Décembre 2018
Rédaction d'article longue traine Rédaction web et référencement 23 Octobre 2018
Meta Description plus longues? Référencement Google 28 Novembre 2017
Comment gérer les urls longues autrement qu'en POST ? Problèmes de référencement spécifiques à vos sites 14 Novembre 2017
Longue traine plus cher que mot clé générique ? AdWords 16 Mars 2017