天天看點

html5動态加載資料頁面閃,html5 – 如何修複iframe頁面重新加載時的chrome閃爍

@ user247245:從你的問題來看,你并不完全清楚你(想)如何使用iframe.它會定期重新加載,還是整個網頁加載一次?

解決方案1:不同的背景顔色

如果你隻是想避免醜陋的白色,并避免過度複雜.在framecontents.html檔案的HTML标頭中設定不同的背景顔色,如下所示:

這樣,當CSS檔案加載,解析和應用時,背景不是#fff.

解決方案2:透明iframe

雖然沒有内容,但iframe應該不可見.解:

當然,不要将它與解決方案1結合使用,你會在腳下拍攝自己.

解決方案3:預加載iframe頁面

如果您稍後加載iframe(例如使用者單擊連結),請考慮預加載其内容.将其隐藏在(父)頁面的頂部附近:

但我建議使用解決方案2.

解決方案4:如果在進行移動Web界面:

了解jQuery Mobile是如何做到的.我們建構了一個必須感覺像本機應用程式的Web界面,是以無需重新加載閃存. jQM解決了這個問題.基本上是背景ajax調用來檢索完整的HTML内容,然後提取正文(“page”div更精确),然後替換内容(如果你願意,可以轉換).一直在顯示重裝旋轉器.

總而言之,這更像是一個移動應用程式:沒有重載閃爍.其他解決方案是:

解決方案5:使用JS注入CSS:

解決方案6:使用JS注入CSS(簡單版)

parent.document.getElementById("theframe").style.visibility = "hidden";

你可以省去< script> part并添加style =“visibility:hidden;”到iframe,但上面将確定對于禁用JS的通路者可以看到架構.實際上,我建議這樣做,因為99%的通路者無論如何都啟用了它,它更簡單,更有效.