make progress bar on images loading with bootstrap/jquery

javascript, jquery, progress-bar

Solution

Try this (demo):

$(function () {
    var n = 0,
        $imgs = $('img'),
        val = 100 / $imgs.length,
        $bar = $('#fabbar');

    $imgs.load(function () {
        n = n + val;
        // for displaying purposes
        $bar.width(n + '%').text(n + '%');
    });
});

Problem

I try to make a progress bar with bootstrap css on images loading. For this, I use the following script : ``` <html> <head> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/> <script type="text/javascript"> var n=0; var c=0; $('img').each(function() { n++; var tmpImg = new Image() ; tmpImg.src = $(this).attr('src') ; tmpImg.onload = function() { c++; }; }); var interval = setInterval(function() { percent = n/100; loaded = c/percent; // for displaying purposes setBar(getBar()+50) // feed loaded var to the progressbar if (loaded == 100) { clearInterval(interval); } }, 1); function setBar(n) { var bar = document.getElementById('fabbar'); bar.style.width = n+'%'; } function getBar() { var bar = document.getElementById('fabbar'); return parseInt(bar.style.width); } </script> </head> <body> <div class="progress progress-info progress-striped active"> <div class="bar" id='fabbar' style="width: 20%"></div> </div> ``` But this doesn't work, i.e the progress bar doesn't progress. How could I do that ?

Original source