title: Hide progress bar once images are loaded
body: <p>I have a progress bar with Bootstrap, CSS and jQuery. Everything works fine but I would like this bar disappears when all images are loaded.
  For this I tried to put in the following script a:</p>
  <pre><code>if(n==100) { $('#fabbar').hide(); }
  </code></pre>
  <p>Here's the script :</p>
  <pre><code>$(function () {
      var n = 0,
      $imgs = $('img.gallery'),
      val = 100 / $imgs.length,
      $bar = $('#fabbar');
  
      $imgs.load(function () {
        n = n + val;
        // for displaying purposes
        $bar.width(n + '%').text(n + '%');            
      });
  
    if(n==100) { $('#fabbar').hide(); }
  
    });
  </code></pre>
  <p>and into my body, I have :</p>
  <pre><code>    &lt;div class=&quot;progress progress-info progress-striped active&quot;&gt;
      &lt;div class=&quot;bar&quot; id='fabbar' style=&quot;width: 20%&quot;&gt;0%&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;a href=&quot;images/1.jpg&quot;&gt;&lt;img class=&quot;gallery&quot; src=&quot;images/1.jpg&quot;&gt;&lt;/a&gt;
      &lt;a href=&quot;images/2.jpg&quot;&gt;&lt;img class=&quot;gallery&quot; src=&quot;images/2.jpg&quot; &gt;&lt;/a&gt;    
      &lt;a href=&quot;images/3.jpg&quot;&gt;&lt;img class=&quot;gallery&quot; src=&quot;images/3.jpg&quot; &gt;&lt;/a&gt;
      &lt;a href=&quot;images/4.jpg&quot;&gt;&lt;img class=&quot;gallery&quot; src=&quot;images/4.jpg&quot; &gt;&lt;/a&gt;
  
  ...
  </code></pre>