animate width on every image load

[tun712]

I'm working on site preloader. I need help to animate div width on every image load

Concept
Check every image in container is loaded.
On every image load increase width of loader in percent to match 100% loader width ( 100% of viewport) on last image load.
After last image is loaded loader will be 100% of viewport & run any function suppose function a() { }
I think more than one .animate(); functions needed.
Is any need to use (g = parseInt(c / a.length * 100) to increase width
End

Script code hints (it's uncomplete I'm working on it)

 var a = $("body").find("img[src]");//finds images in any container. Here body.

 $("body [style]").each(function () {
 var b = $(this).css("background-image").replace(/^url\(["']?/, "").replace(/["']?\)$/, ""); 
 });//finds all background images

  var c = 0,
  d = 0,
  e = 2e3,
  f = 100,
  i = $(".loader");

  i.stop().animate({
   width: f + "%"
   }, e / 2), 
   {
        duration: e
  })

Other code

<div id="loader"></div>

#loader {
position: fixed;
width: 10px;
height: 10px;
overflow: hidden;
display: block;
padding: 0px;
left: 0;
top: 0;
}

[Dani]

I use https://github.com/lightningtgc/MProgress.js and I find it works great. Sometimes there's no benefit to reinventing the wheel.

[RuhiAngel]

Each picture in the set involves a movement outline, and the rate of progress with work since when the movement begins, just the primary picture gets stacked. .eye-liveliness { width: 300px; stature: 300px; foundation picture: