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?


1 Answer 1


You can use

     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

JS would be modified as below:

           alert("Image loaded");

Reference: how to implement Loader widget in magento2

  • how to add loader untill the image is ready...
    – Mahi M
    Feb 21, 2019 at 4:29
  • In which page do you want to add loader? in product detail page or any other page. Feb 21, 2019 at 4:32
  • Please check updated code
    – Khushbu
    Feb 21, 2019 at 4:35
  • In view page .......
    – Mahi M
    Feb 21, 2019 at 4:41
  • <div data-role="showimage" data-mage-init='{"loader": {}}'> <img id="img" class="main-img" src="magento/pub/media/images/sizechart/babydoll.png"> </div> <script> require([ 'jquery' ], function ($) { $(document).ready(function(){alert("sdfsdf"); $('[data-role="showimage"]').trigger('show.loader'); $("#img").load(function(){ alert("Image loaded"); $('[data-role="showimage"]').trigger('hide.loader'); }); }); }); </script>
    – Mahi M
    Feb 21, 2019 at 4:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.