Lazy loading. Why do I see the result of the JavaScript only when it is fully run through?

Question

I have a lot of images on my page, and I am making lazy loading for them. I use img.onload = showmeup(img); combination for all the images, but they all appear simultaniusly, when all are loaded, not one after each other.

Could you give me an advise, how to fix it to let them appears one after each other.

This is how I retrieve images from the server (It is WordPress BTW):

<div id="postbody" class="postcontent">
   <?php the_content();?>
</div>

This is the JS code:

<script>

var div = document.getElementById("postbody"),
    images = div.getElementsByTagName("img");

function showmeup(obg){
  obg.style.animationName = "showmeup";
}

for (var i = 0; i < images.length; i++){
    images[i].onload = showmeup(images[i]);
}

</script>

Also I tired a more complicated way, using if (images[i].complete) {} to ensure that all images get processed apart:

<script>

var div = document.getElementById("postbody"),
    images = div.getElementsByTagName("img");

function showmeup(obg){
  obg.style.animationName = "showmeup";
}

var passed = [],
    ready = 0;

while (ready == 0){
  for (var i = 0; i < images.length; i++){
    if (images[i].complete && images[i].naturalHeight !== 0){
      if (passed.includes(i) == false){
        showmeup(images[i]);
        passed.push(i);
      }
    }
  }

  if (passed.length == images.length){
    ready = 1;
  }
}

</script>

But they still appear simultaniusly right after all images are loaded.

I tried to put JS code infront of </body> and into <footer></footer> and right after the <?php the_content();?>. But all options work similary.

Please let me know how to fix it?