javascript - make progress bar on images loading with bootstrapjquery

I try to make a progress bar with bootstrap css on images loading. For this, I use the following script :

<html>
<head>
<link href=".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 ?

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./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 ?

Share Improve this question asked Apr 14, 2013 at 0:24 user1773603

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

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 + '%');
    });
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - make progress bar on images loading with bootstrapjquery - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)