How to add loader for image on page load

Question

How to add loader for image on page load .. I want to add loader until the main image is ready on page load.

how to do this

Thanks

Update:

<div class="outer-box">
    <nav class="social">
        <div class="box">
            <p>Showing a display Loading Icon Until the Page Loads Completely..</p>
            <img id="new" class="main-img" src="http://magento/pub/media/images/sizechart/babydoll.png"/></div>

    </nav>
</div>
<script>
    require([
        'jquery'
    ], function ($) {
        $(document).ready(function(){alert("sdfsdf");

            // show loading image
             $('body').trigger('processStart');

            // main image loaded
            $('.main-img').on('load', function(){
                // hide the loading image
                $('body').trigger('processStop');
            });
        });
</script>

Answer 1

Try the below jquery code :

// show loading image
$('.loader_image_class').show();

// main image loaded
$('.main_image_class').on('load', function(){
  // hide the loading image
  $('.loader_image_class').hide();
});