Ma barre de Progression ne veut pas disparaitre!

XPS44
Javascript

Bonjour,
J'ai reproduit le tuto de Alex-D sur la barre en progression, mais ma barre ne s'affiche pas alors que mon code JS est bon:

http://jsfiddle.net/886ch/ dans le lien il y a tout mon code avec le résultat

Mon code html:

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Progression-Bar</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- ProgressBar -->
    <div id="progress-bar-container">
    <div id="progress-bar">

    </div>
    </div>
            <center><h1>Création d'une progression en Javascript</h1></center>
        <br />
        <img src="http://lorempixel.com/200/200/abstract">
        <img src="http://lorempixel.com/200/200">
        <img src="http://lorempixel.com/200/200/animals">
        <img src="http://lorempixel.com/200/200/business">
        <img src="http://lorempixel.com/200/200/cats">
        <img src="http://lorempixel.com/200/200/city">
        <img src="http://lorempixel.com/200/200/food">
        <img src="http://lorempixel.com/200/200/nightlize">
        <img src="http://lorempixel.com/200/200/abstract">
        <img src="http://lorempixel.com/200/200/sports">
        <img src="http://lorempixel.com/200/200/sports/1">
        <img src="http://lorempixel.com/200/200/sports/Dummy-Text">
        <img src="http://lorempixel.com/200/200/people">
        <img src="http://lorempixel.com/200/200/city">
        <img src="http://lorempixel.com/200/200/transport">
        <img src="http://lorempixel.com/200/200/food">
        <img src="http://lorempixel.com/200/200/nature">
        <img src="http://lorempixel.com/200/200/fashion">   
        <style type="text/javascript" src="js/jquery.min.js"></style>   
        <style type="text/javascript" src="js/progress-bar.js"></style>
    </div>
</body>
</html>

Mon CSS

body{
    margin: 0px;
    color: #FFF;
    background-color: #333333;
    font-family: " Lato ,Source Code pro , sans-serif ";
}
/*  Pregress-bar    */
#progress-bar-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 10px;
    background: green;
    box-shadow: 0 0 14px rgba(0, 0, 0, .5);
}
#progress-bar{
    position: relative;
    height: 100%;
    background: green;
    box-shadow: 0 0 14px rgba(0, 0, 0, .5);
    width: 0%;
}
#progress-bar-elements{
    display: none;
}

Mon JS: 

progressBar = {
    countElmt: 0,
    loadedElmt: 0,
    init: function () {
        var that = this;
        this.countElmt = $('img').length;
        // Construction et ajout progress bar
        var $progressBarContainer = $('<div/>').attr('id', 'progress-bar-container');
        $progressBarContainer.append($('<div/>').attr('id', 'progress-bar'));
        $progressBarContainer.appendTo($('body'));
        // Ajout container d'éléments
        var $container = $('<div/>').attr('id', 'progress-bar-elements');
        $container.appendTo($('body'));
        // Parcours des éléments à prendre en compte pour le chargement
        $('img').each(function () {
            $('<img/>')
                .attr('src', $(this).attr('src'))
                .on('load error', function () {
                that.loadedElmt++;
                that.updateProgressBar();
            })
                .appendTo($container);
        });
    },
    updateProgressBar: function () {
        $('#progress-bar').stop().animate({
            'width': (progressBar.loadedElmt / progressBar.countElmt) * 100 + '%'
        });
    }
};
progressBar.init();

HELP PLEAS

Cordialement XPS

7 réponses

antho07
Réponse acceptée

Bonjour,
si avec le code donné elle s'affiche mais pas longtemps, et le hide a un effet un peu bizarre chez moi sous chrome
Avec ceci le rendu est mieux:

updateProgressBar: function () {
        $('#progress-bar').stop().animate({
            'width': (progressBar.loadedElmt / progressBar.countElmt) * 100 + '%'
        });
         if(progressBar.loadedElmt == progressBar.countElmt){
     $('#progress-bar').fadeOut(500);
 }
    }
};
antho07
Réponse acceptée

Je viens de le tester..
T'as bien vider le cache de ton navigateur?

antho07

Bonjour

<style type="text/javascript" src="js/jquery.min.js"></style>   
        <style type="text/javascript" src="js/progress-bar.js"></style>

avec des balises script ça ira sans doute mieux ^^

XPS44
Auteur

J'au réussi a faire marcher la barre en mettant:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/progress-bar.js"></script>

Mais la bar ne disparait pas que faire ?

antho07

bah tu l'as dis toi même : "disparaitre"

updateProgressBar: function () {
        $('#progress-bar').stop().animate({
            'width': (progressBar.loadedElmt / progressBar.countElmt) * 100 + '%'
        });
    if(progressBar.loadedElmt == progressBar.countElmt){
        $('#progress-bar').hide();
    }
    }
XPS44
Auteur

Oui mais elle ne disparait pas quand elle est a 100% et en métant votre code elle ne s'affiche plus dutout

XPS44
Auteur

Même avec le code que vous m'avez donné ma bar ne disparait pas a la fin du chargement des photos