JavaScript/jQuery загрузчик математический вопрос

Question

Я думаю, что у меня есть мозговой пердит здесь ... Кроме того, обратите внимание, что setTimeout и hardcoded 6 просто для тестирования анимации прямо сейчас. Это закончится тем, что будет в .load() и сделать счет на изображения. В любом случае этот код:

var imagesLoaded = 0; 

var loader = function(){ 
    setTimeout(function(){ 
     if(imagesLoaded < 6){ 
     imagesLoaded++; 
     console.log($('.'+settings.loaderClass).width()/imagesLoaded+'px') 
     loader(); 
     } 
    },500) 
} 

loader(); 

Практически все работает, но проблема в математике. Это идет назад. Хорошо, так что я реверс это нравится:

console.log(imagesLoaded/$('.'+settings.loaderClass).width()+'px') 

, но затем я получаю:

0.0026041666666666665px 
0.005208333333333333px 
0.0078125px 
0.010416666666666666px 
0.013020833333333334px 
0.015625px 

И, очевидно, что не будет работать.

Какая математика мне нужно делать? В основном разметка просто:

<div class="loader"> 
    <div class="loaderBar"></div> 
</div> 

и им просто увеличивая ширину .loaderBar.

Спасибо!

Answer 1

console.log (($ (' '+ settings.loaderClass) .width() * imagesLoaded/6) +' ПВ')

Там, где 6 представляет собой общее количество изображений загружен, который вероятно, переменная в вашем случае. После этого последовательность WIDTH * 0/6, WIDTH * 1/6, WIDTH * 2/6 ... и вы можете включить фазу, где у вас есть WIDTH * 6/6, если вам нужно показать 100% -ное завершение.

Answer 2

Вам нужно (imagesLoaded/totalImages) * loaderWidth.