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中发生了变化，您将能够阅读它。

例如，像这样：

＆＃13;

$(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();

});

＆＃13;

<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>

＆＃13;

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

1 个答案: