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>