title: jQuery image error handling for media queries
body: <p>I have images loaded depending on screen size using media queries. I would like to handle the error if any using jQuery. A text message will show when the image failed.</p>
  
  <p>My code so far:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
          &lt;img class="img-responsive center-block" id="notice_banner" alt="" src="css/images/banner.png"/&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12"&gt;
          &lt;p id="altText" style="display: none"&gt;
              This is a text!
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS code:</p>
  
  <pre><code>/* xs */
  img {
  content:url("images/small_banner.png");
  }
  /* md */
  @media (min-width: 768px) {
  img {
      content:url("images/large_banner.png");
  }
  }
  </code></pre>
  
  <p>javascript code:</p>
  
  <pre><code>$(document).ready(function() {
  $("img").on("error", function() {
      $("#altText").show();
  });
  });
  </code></pre>
  
  <p>The problem now is that it can detect the error from the original src attribute, but not when the images are coming from media queries.</p>
  
  <p>Anyone has any idea how to solve this?</p>