解決iframe載入頁面出現白屏閃爍問題

2021-09-24 23:25:28 字數 786 閱讀 6130

今天維護公司的乙個老專案,專案是乙個公共頁面iframe充當類似vue的router-view,通過這個iframe來切換不同頁面。但是在切換或者重新整理的時候,會出現白屏閃爍問題,使用者體驗非常不好!

而且由於專案需要適配2k,4k,8k屏,所以使用了rem單位,而使用rem會導致頁面在開始載入的一瞬間會很小,然後突然變大,rem的使用加劇了閃爍幅度;

*由於保密我這裡就不錄屏了;

相信大家做專案的時候都會建立乙個樣式初始化檔案,對全域性標籤樣式進行統一;

在這個css檔案裡面新增以下**,你會發現,原來頁面切換可以這樣如絲般順滑→_←

body

@keyframes page-fade-in

100%

}

當然如果你想更逗比一點,那就引入animate.css,挑幾個逗比的入場動畫,或者自己寫也行。

@keyframes page-scale-up 

100%

}@keyframes page-scale-down

100%

}@keyframes page-slide-top

100%

}@keyframes page-slide-bottom

100%

}@keyframes page-slide-left

100%

}@keyframes page-slide-right

100%

}

趕緊去試試吧~~~~~~~~~~~~~~

解決iframe載入頁面出現白屏閃爍問題

在這個css檔案裡面新增以下 你會發現,原來頁面切換可以這樣如絲般順滑 body keyframes page fade in 100 當然如果你想更逗比一點,那就引入animate.css,挑幾個逗比的入場動畫,或者自己寫也行。keyframes page scale up 100 keyfram...

ExtJs非Iframe框架載入頁面實現

p style height 100 載入頁面的控制項的高度和寬度自適應 由於這種使用autoload模式載入進來的頁面是不能隨著瀏覽器的大小變化而變化的。所以我們要實現瀏覽器的大小變化函式,即window.onresize事件。但是在實現這個事件的時候,一定要加上settimeout來控制它,讓其...

解決滾動條載入出現的頁面抖動

原因 乙個 通常存在著多個頁面,瀏覽器預設提供的overflow auto 根據內容進行判斷是否需要滾動條,這造成每個頁面是否有右側的滾動條是不一致的,這會導致有滾動條的頁面跳轉到沒有滾動條的頁面會發生頁面抖動 實現css html 缺點 不論螢幕是否需要滾動條,滾動條都會顯示 100vw相對於瀏覽...