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

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

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

7 抛砖引玉

你在工作中是怎么解决此问题的呢？如果您还有更好的方案，欢迎在评论留言，让更多的读者看到您散发的光和热。

转载：https://juejin.im/post/5f10fa60f265da22dd7ddf0e?utm_source=gold_browser_extension