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;
}
Re: animate width on every image load 80 80

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

Re: animate width on every image load 80 80

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:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.