javascript - 媒体查询的 jQuery 图像错误处理

Question

我使用媒体查询根据屏幕大小加载图像。如果有任何使用 jQuery 的错误，我想处理。图像失败时将显示一条文本消息。

到目前为止我的代码:

<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 代码:

/* xs */
img {
content:url("images/small_banner.png");
}
/* md */
@media (min-width: 768px) {
img {
    content:url("images/large_banner.png");
}
}

javascript代码:

$(document).ready(function() {
$("img").on("error", function() {
    $("#altText").show();
});
});

现在的问题是它可以从原始 src 属性检测到错误，但当图像来自媒体查询时却检测不到。

有人知道如何解决这个问题吗？

Answer 1

正如我在评论中提到的，content在伪元素之外不完全支持 :before和 :after (据我所知，只有 Chrome 支持任何元素)。最重要的是，这样做还有另一个问题:CSS 错误不会触发 JS 事件，因此如果 CSS 中链接的图像失败，JS 将无法检测到它。

一种解决方案是收听 resize事件，如果窗口大小超过媒体查询中使用的阈值，则执行一个或另一个操作(例如更改图像的 src)。在这种情况下，由于更改发生在 JS 中，您将能够阅读它。

例如，像这样:

$(document).ready(function() {

  $("img").on("error", function() {
    $("#altText").show();
  });

  function resizeActions() {
    var windowWidth = $(window).width();
    if (windowWidth < 768) {
      $("#notice_banner").attr("src", "//placehold.it/100x100");
    } else if (windowWidth >= 768) {
      $("#notice_banner").attr("src", "fake-url-path");
    } // else if ...
    
  };

  // execute on load and on window resize
  $(window).resize(resizeActions);
  resizeActions();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <img class="img-responsive center-block" id="notice_banner" alt="" src="//placehold.it/200x200" />
    </div>
    <div class="col-xs-12">
      <p id="altText" style="display: none">
        This is a text!
      </p>
    </div>
  </div>