make progress bar при загрузке изображений с помощью bootstrap/jquery

Я пытаюсь сделать индикатор выполнения с загрузкой css при загрузке изображений. Для этого я использую следующий сценарий:make progress bar при загрузке изображений с помощью bootstrap/jquery

<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>

Но это не работает, то есть прогресс бар не прогрессирует. Как я мог это сделать?

источник

2013-04-14 youpilat13

Попробуйте (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 + '%'); 
    }); 
});

источник

2013-04-14 03:36:25 Mottie

[Demo обновленное для Bootstrap 3] (http://jsfiddle.net/Mottie/yphM4/45/) – Mottie

make progress bar при загрузке изображений с помощью bootstrap/jquery

ответ

Смежные вопросы