我使用媒体查询根据屏幕大小加载图像。如果有任何使用 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 属性检测到错误,但当图像来自媒体查询时却检测不到。
有人知道如何解决这个问题吗?
最佳答案
正如我在评论中提到的,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>
关于javascript - 媒体查询的 jQuery 图像错误处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47320525/