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