iT邦幫忙

0

html 元素樣式 background image有時未被載入(圖片資源可讀)

  • 分享至 

  • xImage

大家午安,

"html 元素樣式 background image偶爾未顯示(圖片資源可讀)"

如標題情境,測試了一段時間,目前仍然沒有什麼頭緒,所以想請教各位是否有遇過類似問題,是否能提供我一些方向QQ。

目前我只有在mobile裝置上的chrome遇到(版本84.0.4147.89)。

有發生類似情形的元素有:

  1. 單選元素 input type="radio"
    採用的css屬性設定
    input[type=radio ]:not(old) + label{
    background: url(../../Images/selected.png) round;}

    input[type=radio ]:not(old):checked + label{
    background: url(../../Images/unselected.png) round;}

  2. div class="myclass"
    採用的css屬性設定
    background: url(../../Images/btn_blue.png) round;

排錯上,透過chrome remote debugging,確認過的狀態有:

  1. 圖源無誤可開啟
  2. 樣式設在獨立的css檔案
  3. 渲染的css檔案有載下來,並有渲染
  4. URL屬性使用位置為相對位置,background image偶爾未顯示出來
  5. 在chrome偵錯介面中network清單中,若在背景圖未成功顯示的情況下,清單上看不到有request紀錄(理論上應該要有)。
  6. 另外,在network清單中成功的情況下,有載入兩次name相同的檔案?如下圖
    https://lh6.googleusercontent.com/zdcGWL9qnz9BBFf2ogsrHWas8DFz7J6-IsM_lqSoSiGRiRChbhXgJDu45NflASPmUv9oxH8pYCW2a9ouxNi3=w1920-h937-rw
    一個type是text/css另一個是styleSheet,
    以我目前的理解,styleSheet是css檔案本身。不確定與這問題有沒有什麼關聯性。
    如果顯示失敗,則清單上只有顯示載入styleSheet。

-----後續更新-----

目前測試如果在dev tool觸發css重載,狀況就解決了。因此,暫時先用JS強制重載CSS,然後再觀察看看。

看更多先前的討論...收起先前的討論...
dragonH iT邦超人 5 級 ‧ 2020-07-31 17:41:52 檢舉
看一下出問題時

你的 dom structure 是長怎樣
fillano iT邦超人 1 級 ‧ 2020-08-01 09:27:42 檢舉
看你的描述有點像是cache的問題...用network把沒抓到時的request/response看一下有沒有端倪。當然也可能不是這個問題...
龍大,
該呈現的element 都有顯示,但就背景圖沒load。

fillano大,
背景圖沒出現的情況,network上他是完全沒有request背景圖的紀錄。因此我假定渲染時,元素是不存在的(實際上有問題的元素也確實受到JS控制),所以才沒加載圖。但理論上應該就算後面動態渲染元素也應該要執行加載。
fillano iT邦超人 1 級 ‧ 2020-08-03 13:33:13 檢舉
也可能是css檔的cache,總之檢查看看
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
咖咖拉
iT邦好手 1 級 ‧ 2020-07-31 17:02:38

網頁有放到空間上看過嗎?
只有在本地端上看?

你沒有提供頁面或範例
很難知道遇到甚麼問題

目前網頁跟圖片資源都是在自家的測試環境進行測試,情況比較複雜,所以比較沒辦法在其他環境重建。

咖咖拉 iT邦好手 1 級 ‧ 2020-07-31 17:36:47 檢舉

network 應該可以看到圖片有沒有被加載出來
console 也看一下有沒有報錯

顯示失敗的時候沒有看到加載,但如果在chrome偵錯下style那取消之後再重新啟用background就會載入。或是radio button checked後他checked的圖也會加載,但未checked的圖還是沒載下來。
感覺是文件沒有渲染到那行屬性一樣。

0

基本推測可能是相對路徑造成的。
建議你採用絕對路徑。

不過奇怪的是,在chrome偵錯下,在style頁簽那,將background:Url那行取消再啟用,圖會顯示出來,network清單當下也能看到載入那張圖的紀錄。

我要發表回答

立即登入回答