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

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

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");

   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;

Recommended Answers

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

Jump to Post

All 2 Replies

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.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.