Images on my website change based on the screen size using media queries. I am looking for a way to handle errors that may occur using jQuery. I want to display a text message if the image fails to load.
Here is the code I have so far:
<div class="container">
<div class="row">
<div class="col-xs-12">
<img class="img-responsive center-block" id="notice_banner" alt="" src="css/images/banner.png"/>
</div>
<div class="col-xs-12">
<p id="altText" style="display: none">
This is a text!
</p>
</div>
</div>
CSS code:
/* xs */
img {
content:url("images/small_banner.png");
}
/* md */
@media (min-width: 768px) {
img {
content:url("images/large_banner.png");
}
}
javascript code:
$(document).ready(function() {
$("img").on("error", function() {
$("#altText").show();
});
});
I am facing an issue where it can detect errors for images from the original src attribute, but not for images loaded through media queries.
Does anyone have a solution for this problem?