2017-08-25 62 views
-2

我完成了一個網站,看到滾動時有白色方塊 - site here。發生在移動設備和桌面上。它僅在第一次加載時發生。這是否意味着該頁面尚未完全加載?如果是這樣,我可以顯示更長的加載屏幕,但需要知道,我怎麼知道何時加載頁面。如果不是因爲這個 - 那是什麼原因造成的?滾動頁面時的白色方塊

重現:在瀏覽器中打開它,並在加載屏幕後使用鼠標滾動條向下滾動(使用屏幕上的滾動條無法重現它)。

在手機瀏覽器中打開它,向下滾動頁面 - 在這裏我們可以很明顯地看到它。

不確定爲什麼你不能重現它。請參閱我手機上的附件截圖。滾動上下時發生這種情況。 enter image description here

+2

我沒有看到任何白色塊。你什麼意思? –

+4

請在此處添加有意義的代碼和問題描述。請不要鏈接到需要修復的網站 - 否則,一旦 問題得到解決,或者您鏈接到的網站無法訪問,此問題將對未來的訪問者失去任何價值。發佈 [最小,完整和可驗證示例(MCVE)](https://stackoverflow.com/help/mcve) 演示您的問題將幫助您獲得更好的答案。欲瞭解更多信息,請參閱 [我網站上的某些內容不起作用。我可以直接粘貼一個鏈接嗎?](https://meta.stackexchange.com/questions/125997/) 謝謝! – j08691

+0

@KobyDouek同意沒有滾動的白色塊。 –

回答

3

在空的緩存中,您的頁面發出34個請求,其總頁面大小爲23.7 MB。其中,有18個圖像請求,圖像總下載大小爲23.3MB。您是否嘗試在用戶的手機上加載此網站?

縮小或優化您的圖像。白色塊即將到來,因爲圖像的容器尚未完成加載,因爲圖像仍在下載。此外,移動緩存大小比計算機緩存大小還要小。

簽出網站的第一個或空的緩存加載的鉻網絡選項卡,你可以看到。

圖片加載完畢後,您的網頁再次訪問。它的總數據傳輸是5.7 KB,但仍有34個請求仍然存在,並且東西是從緩存中呈現的。如果您的圖片在您的網站上保持不變,您可以嘗試爲圖片添加遠期過期。

+0

大部分情況都是正確的,但即使頁面已完全加載到低端設備上,方塊仍會保留。這是*極端*極端。白色正方形是延遲的瀏覽器繪畫,這是由於觸摸事件監聽器阻止了不斷的重新繪製,這些監聽器並未設置爲被動滾動和其他滾動阻礙設計元素。 –

+0

白色塊也出現在我的網頁瀏覽器中,使用較慢的連接速度。此頁面需要一分鐘才能首次加載8MBPS的WIFI線路。現在,DOM內容在幾秒鐘內加載。但完整的頁面加載需要幾分鐘。 – Amit