如何检测页面上的图片被屏蔽了？

Question

1 描述及影响

• 商业合作：配置可跳转图片，实现引流
• 商品引流：根据用户习惯进行猜你喜欢
• 爆款引流：利用爆款吸引流量
• 程序兼容：图片缺失导致布局改变
• 用户体验：认为程序不可靠，放弃下单

2 原因分析

图片广告被拦截，大多数原因是浏览器安装了相应的广告拦截插件，如：AdBlock plus 等等，还有一部分来自浏览器广告屏蔽脚本；

3 思路分析

以下给出通用的解决的方案，不全面或不兼容的方法有很多，就不一一列举， 根据业务场景需要，可采用不同的方案：

分析被屏蔽后的图片元素得出，广告被屏蔽后，图片的 display 属性会变为 none, 因此，可以以此为依据，将页面上所有需要检测拦截的图片，做上标记，加载完成后，检测图片 display 属性是否是 none, 就可以判断出是否被拦截。以下给出 阮一峰 老师在自己博客主页上做的拦截判断，供参考：

4 解决方案

function checker () {

  // var img = document.querySelector('img[src^="http://www.example.com/blog/images"]');
  var img = document.querySelector(
    'a > img[src*="wangbase.com/blogimg/asset/"]'
  );

  if (img && window.getComputedStyle(img).display === "none") {

    var sponsor = document.querySelector(".entry-sponsor");
    var prompt = document.createElement("div");
    prompt.style =
      "border: 1px solid #c6c6c6;border-radius: 4px;background-color: #f5f2f0;padding: 15px; font-size: 14px;";
    prompt.innerHTML =
      "<p>您使用了广告拦截器，导致本站内容无法显示。</p><p>请将 www.example.com 加入白名单，解除广告屏蔽后，刷新页面。谢谢。</p>";
    sponsor.parentNode.replaceChild(prompt, sponsor);
    document.querySelector("#main-content").innerHTML = "";
  }
}

function isInstalledADBlock () {

  var e = document.createElement("div");
  (e.className = "adsbox"), document.body.appendChild(e);
  var t = "none" === getComputedStyle(e).display;
  return document.body.removeChild(e), t;
}

setTimeout(checker, 1000);

复制代码

5 总结分析

图片被拦截检测，思路很多，最直接的想法是：因为安装了某个插件，导致图片显示不正常，直接检测是否安装了插件不就好了。但实际上这个思路实现起来很难，检测方法很难全覆盖所有类型的拦截插件，因此，最终在阮一峰老师的博客上看到了原生 JS 的解决办法，恍然大悟。

6 感悟

解决问题的方法可能有很多，但实现难易程度及可移植性不同，解决一个问题，最根本的，是要找到原因，分析出问题带来的本质影响，最终对症下药，择优选择方案。