問題:圖片在360瀏覽器不被加載,在UC瀏覽器強制不顯示。
前言不多說,直接上圖。
360瀏覽器顯示情況:
UC瀏覽器顯示情況:
由以上兩張截圖可以看到,在360瀏覽器,banner圖片處根本沒有加載圖片,連img標簽都沒有;UC瀏覽器稍微好一點,加載了img標簽,但是強制給了img一個‘display:none !important’的樣式。
我以人格保證,我絕對沒有給img標簽寫‘display:none !important’樣式,后端同學表示很無語:不是你寫的,難道是我寫的?我一個寫后端的,更不會寫css樣式好嗎
我的第一個反應是加載錯誤,然后狂按F5刷新網頁。結果並沒有什么用!
我開始檢查我的css樣式、js,但是並沒有寫這個樣式,並且在谷歌瀏覽器顯示正常,最討厭的IE瀏覽器也顯示正常。
我將其中1張圖片的地址改成本地的后,圖片又能正常顯示了。
我猜測這是圖片路徑的問題。但是在谷歌瀏覽器、IE瀏覽器都能看到圖片!
思路暫時卡住,寶寶處在一個抓瞎狀態
講真,這是我第一次遇到這個問題。在此之前,我從未遇到過圖片路徑正確但是不加載圖片的情況。
在我冥思苦想,各種抓耳撓腮之后,我突然想起來是不是我瀏覽器的設置有問題,於是我開始一個一個的檢查。
最后發現,UC瀏覽器和360瀏覽器都有一個廣告攔截:
當我取消廣告攔截后,兩個瀏覽器都可以正常加載圖片。
由此得到一個結論:網站的圖片被當成廣告圖片屏蔽了!
瀏覽器廣告攔截
目前大部分用戶都會設置廣告攔截,用js判斷打開網頁的是哪個瀏覽器,並借此提示用戶關閉瀏覽器廣告攔截功能是不現實的;讓瀏覽器取消廣告攔截功能更不切實際。
大部分瀏覽器的廣告攔截規則都是廣告黑名單+一些廣告字眼匹配,比如百度聯盟、搜狗聯盟、Google聯盟這些就算在廣告黑名單里的,一般廣告過濾都會過濾掉這些廣告聯盟代碼。剩下的就是廣告字眼匹配,比如js地址包含ads.php、ad.js甚至是gg.js都可能會被過濾,360瀏覽器甚至會把包含ad.gif、960x90.jpg帶有廣告字眼的圖片地址都會屏蔽掉。
瀏覽器攔截關鍵字:guanggao、ad、advert、advertisement、advertised、commercials等等。
原因已經找到,現在開始解決問題。
我在谷歌瀏覽器上仔細查看了圖片的src屬性值,並沒有看到與廣告相關的關鍵字。我的js文件和css樣式名也沒有與廣告相關的關鍵字。
於是我又詢問后端同學,他后端是否寫了與廣告相關的關鍵字。后端同學檢查了之后,發現他有個文件夾名稱的就是guanggao。
至此,問題完美解決。