【问题标题】:jQuery detect broken image fires too latejQuery 检测损坏的图像触发为时已晚
【发布时间】:2011-09-28 15:09:26
【问题描述】:

我正在尝试检测 jQuery 中损坏的图像,在这种情况下,我想删除它们并用它的替代文本替换。 我正在使用我在 SO 上找到的以下代码;

$(document).ready(function(){
    $('img.logoimg').error(function() {
        $(this).unbind("error");
        $(this).parent().prepend("<strong>"+$(this).attr("alt")+"</strong>");
        $(this).remove();
    });
    //...
}

这在 FF 中运行良好。

但是,在 Chrome 中,浏览器仍会显示一个正方形,表示图像损坏。 似乎error 事件触发得太晚,无法检测到损坏的图像。

我可以让它早点点火吗?代码还有其他问题吗?

[编辑] 在下方添加了解决方案。任何能够解释这一点的人都可以获得这个问题的解决方案。

【问题讨论】:

  • 你能给我们一个直播网站的链接吗?
  • 如果你检查 DOM,img 元素是否被移除了?
  • @Liam 很遗憾,由于公司敏感信息,我不能。我将尝试提供一个完整的 JSFiddle @Alex,在 Chrome 中检查时,img 元素仍在 DOM 中

标签: jquery html http-status-code-404


【解决方案1】:

我已经通过消除发现了问题。这不是你想的地方。 在我的脚本标签下,我有一个 Google Ads 代码:

<script type="text/javascript" src="my_javascript.js"></script>
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>GS_googleAddAdSenseService("ca-pub-XXXXXXXXXXXXXX");GS_googleEnableAllServices();</script>
<script type="text/javascript">
    GA_googleAddSlot("ca-pub-XXXXXXXXXXXXXX","banner_1");
    GA_googleAddSlot("ca-pub-XXXXXXXXXXXXXX","banner_2");
    GA_googleAddSlot("ca-pub-XXXXXXXXXXXXXX","banner_3");

    GA_googleFetchAds();
</script>

这是最后一个调用:GA_googleFetchAds() 杀死它。删除该呼叫似乎解决了我的问题。奇怪。

我现在已经这样解决了:

$(document).ready(function(){
    GA_googleFetchAds();
});

任何有合理解释的人都会赢得我永远的尊重和感激。

【讨论】:

  • 似乎 google fetch 广告需要很长时间并在您的文档准备好之前触发,并且由于文档尚未准备好您的初始 jquery 等待,因此让您看到损坏的图像。
  • 如果我的评论实际上是正确的,我会建议删除文档准备功能,以防止将来的预准备操作延迟您的 jquery 代码(未经测试的建议)。
  • 所以我尝试过: 1. 让我的 error() 脱离文档。 2. 将 GA_googleFetchAds() 排除在文档之外。 3.在Google Ads之后加载jQuery。似乎什么都做不了
  • 您是否将您的 error() 从 docready 中取出并将 GA_googleFetchAds() 留在 docready 中?如果这在 docready 中产生相同的结果,请保持这种状态(以防止在您的 error() 之前加载其他代码),但如果在 docready 中没有得到相同的结果,那么您就会遇到一些奇怪的问题。
  • 最终,将 Google Ad 内容放入 docready 中没有广告。所以这并不是一个真正的解决方案。我通过手动为每个图像标签添加onError="imgError(this) 属性来解决它。现在只是忽略脏 HTML
猜你喜欢
  • 1970-01-01
  • 2012-04-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-06-23
  • 1970-01-01
相关资源
最近更新 更多