title: Show image only after fully loaded
body: <p>I'm trying to hide an image until it fully loads. </p>
  
  <p>I've this <code>jquery</code>. </p>
  
  <pre><code>//Load image on click
  $(document).on("click", '[data-item="zoomIn"]', function(){
       var url = $(this).parent().siblings('.largeImgUrl').val();
       $('.flickr-big-image').empty().append("&lt;img class='hidden' id='zoomIn' src='"+url+"' &gt;");
       $("#flickr-popup").modal('show');
  });
  
  //Show image            
  $('#zoomIn').on('load', function(){
      $('#zoomIn').removeClass('hidden');
  });
  </code></pre>
  
  <p>But it seems the <code>onload</code> event is not functioning. Am I doing it wrong here?</p>