How to add loader untill the image not ready on page load

Question

I want to show the image in particular div.

I want to show the empty div . if the img src is ready , then it display the img tag in particular div

How to do that?

Thanks.

Answer 1

You can use

$("#img").load(function(){
     alert("Image loaded");
});

Reference: http://jsfiddle.net/5WFjj/

To display loader for that div, use below code

<div data-role="showimage" data-mage-init='{"loader": {}}'>
     Your image
</div>

JS would be modified as below:

$(document).ready(function(){
      $('[data-role="showimage"]').trigger('show.loader');
      $("#img").load(function(){
           alert("Image loaded");
           $('[data-role="showimage"]').trigger('hide.loader'); 
      });
});

Reference: how to implement Loader widget in magento2