begin process at 2012 05 27 10:11:13
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

Preloader petits problèmes


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Preloader petits problèmes

jeudi 11 février 2010 à 17:12:44 | Preloader petits problèmes

thepopol777

Bonjour!

Alors j'ai un petit soucis avec un preloader javascript. En effet, j'utilise un div ( via css ) avec un background-image qui contient le loader et la barre de chargement. tout fonctionne bien sauf que le loader met du temps a apparaitre sur la page. J'ai donc fait un preloader de l'image du background, me disant que si elle était chargée elle apparaitrait directement sur la page suivante ( qui est le vrai loader vous me suivez? :p )...

Bon tout ceci est un peu flou, voici le code, si vous ne comprennez pas quelque chose je serais ravi de répondre a vos questions.

Merci ;)


Code HTML :
<body>
<div id="conteneur">




<div id="preloader">


Code Javascript :

<script> // JavaScript Document
var time = 1; // temps en seconde apres lequel la bar de chargement disparait une fois finie
    
    var maxtime = 120; // temps maximum apres lequel la bar de chargement disparait
  
        /* PAs touche */
        var done = 1;
        time = time * 1000;
        maxtime = maxtime * 1000;
        loaded = new Array();
  
        function Pre_load()
        {
            for( index = 0; index < document.images.length; index++ )
            {
                loaded[ index ] = false;
            }
        }
  
  
    window.setTimeout( "document.getElementById('loadimages').style.visibility='hidden';", maxtime );
        
    function Preload_Img()
    {
        imgs = document.images;
  
            for( index = 0; index < imgs.length; index++ )
            {    
                if( done >= imgs.length )
                {
                    break;
                }
                    else if( imgs[ index ].complete && loaded[ index ] == false )
                {
                    done++;
                    loaded[ index ] = true;
                }
            }
            
            if( done >= imgs.length )
            {
                window.setTimeout( "document.getElementById('loadimages').style.visibility='hidden';", time );
            }
                else
            {
                window.setTimeout( "Preload_Img()", '58' );
            }

 
            if( done == imgs.length )
            {
                window.setTimeout( "window.location.href='intro.html';", time);
            }
  
        PRC = Math.round( ( ( done / imgs.length ) * 100 ) );
		barwidth = PRC * 2.13 ;
          
        preview = 
		
		'<img src="images/loadingbar.gif" width=' + barwidth + ' height = 13/>'
		+'<br />'+'<br />'
		+ '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'+ PRC + '&nbsp;' + '%'

        document.getElementById('preloader').innerHTML = preview;
    }
    
    Pre_load();
    Preload_Img();

</script>


Code HTML :
</div>
<p id="copyright">Copyright&copy;2010 CSTM<br />Km 4,5 Route de Rufisque<br />(+221) 33 859 52 00</p>


<div id="loadimages">


<img src="images/800600.jpg" style="display:none">
<img src="images/1024768.jpg" style="display:none">
<img src="images/1280800.jpg" style="display:none">
<img src="images/19201200.jpg" style="display:none">
<img src="images/barre.png" style="display:none">
<img src="images/bg_menu.png" style="display:none">
<img src="images/bg_nav.png" style="display:none">
<img src="images/cstm_logo.png" style="display:none">
<img src="images/fond_colle.jpg" style="display:none">
<img src="images/fond_safor.jpg" style="display:none">
<img src="images/logo_columbia.png" style="display:none">
<img src="images/logo_safor.png" style="display:none">
<img src="images/menu_footer.png" style="display:none">
<img src="images/nav_header.png" style="display:none">
<img src="images/nav_footer.png" style="display:none">
<img src="images/nav_header_diapo.png" style="display:none">
<img src="images/return_a.png" style="display:none">
<img src="images/return_c.png" style="display:none">
<img src="images/return_h.png" style="display:none">
<img src="images/safor_bandeau_c.png" style="display:none">
<img src="images/safor_menage.png" style="display:none">
<img src="images/safor_toles.png" style="display:none">
<img src="images/slash.png" style="display:none">

<img src="images/diapo_safor/1.jpg" style="display:none">
<img src="images/diapo_safor/2.jpg" style="display:none">
<img src="images/diapo_safor/3.jpg" style="display:none">




</div>

</div>

</body>
jeudi 11 février 2010 à 17:26:03 | Re : Preloader petits problèmes

thepopol777

je rajoute qu'en local, le pourcentage met "infinity" et ne bascule pas sur la page suivante (intro.html). Pourtant en ligne cela fonctionne bien. Si ça peut aider...

jeudi 11 février 2010 à 17:40:24 | Re : Preloader petits problèmes

thepopol777

( arf un 3e post, pas de commende éditer dommage )

Je viens de tester, et en fait sous Firefox ça marche ( mais quand même long a apparaitre ) tandis que sous IE ça attend carrément 100% pour que quelquechose daigne apparaitre :/
jeudi 11 février 2010 à 18:24:20 | Re : Preloader petits problèmes

pegase31

Membre Club Administrateur CodeS-SourceS
Ceci est un code javascript, donc aucun rapport avec Flash/ActionScript.

Je déplace en section concernée.

Peg'
Admin Codes-Sources
jeudi 11 février 2010 à 18:30:54 | Re : Preloader petits problèmes

thepopol777

Dans le code javascript, j'ai rajouté type="text/javascript" que j'avais oublié, du coup, maintenant même online j'ai Infinity à la place du pourcentage et ça ne bouge pas.


Cette discussion est classée dans : code, time, index, preloader, done


Répondre à ce message

Sujets en rapport avec ce message

mettre un code en annexe ( code.js) [ par floky56 ] Bonjour, je voudrais savoir comment mettre un code source dans un autre fichier : j'ai fait des test déja mais ca ne fonctionne pas  voici mon code :p Un probleme d'affichage (debutant) [ par hellodelu007 ] Bonjour. J'ai envie de faire un affichage de photos qui défilent. Genre, toutes les 3 secondes, la photo (et son intitulé), se modifie. Mais si ce scr image de fond [ par debutant VB ] J'aimerai afficher une image de fond sans utiliser la propriété bgcolor de pour plus de possibilités. J'ai fait ce code qui fonctionnait avec FrontPag probleme de superposition div / menu (z-index ?) [ par ju0123456789 ] Bonjour, J'ai expressément besoin d'un code en CSS ou en JS qui m'afficherais une image au survol d'un lien. (ce lien est une image) J'ai trouvé exa par dessous ou par dessous ...? [ par GuilleW ] voila .. il me faudrai un code du style :z-index:'100'mais dans une fonction ... je m'explique ...disons que j'ai deux en posi Timeout [ par turlut ] Bonjour tout le monde !J'aimerais bien créer un code javascript qui ouvre une fenêtre avec un url genre www.monsite.com/index.php?url= avec une boucl Liste déroulante qui masque la suivante si "non selectionné" [ par scoal ] Bonjour, J'ai 3 liste déroulante qui s'enchaine, le contenue de la seconde dépend du "select" de la première et de même pour la troisième en fonction probleme z-index / CSS [ par ju0123456789 ] Bonjour, J'ai affaire à un souci qui parait simple, mais je n'arrive pas a avoir le resultat souhaité. J'ai tout simplement 2 DIV, un que je souhaite Utiliser Jquery dans un fichier js [ par nicolasgaillard ] Bonjour, J'ai télécharger ce code : [url=http://www.javascriptfr.com/codes/GOOGLE-MAP-API-V3-CARTE-MARQUEUR-INFOWINDOWS_52226.aspx]http://www.javascr Comment modifier les paramètres vidéos ? [ par hellotk ] Bonjour à tous, Étant novice en javascript, j'ai une question concernant la modification de paramètres vidéos; j'utilise pour mon site un lightbox en


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,061 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales