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

Question

Я думаю, у меня тут пукнет мозг ... Также, пожалуйста, обратите внимание, что setTimeout и жестко закодированный 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

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

Answer 2

console.log (($ ('.' + Settings.loaderClass) .width () * imagesLoaded / 6) + 'px')

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