切換頁面時出現白色屏幕閃爍

我們有一臺在本地機器上運行的AngularJS應用程序（所有資產都在硬盤上），當我們切換頁面時，我們看起來很難解決屏幕閃爍問題。切換頁面時出現白色屏幕閃爍

這裏發生了什麼，我們的問題是在＃3：主頁

2）按鈕，用戶點擊進入下一頁（http://localhost:9000/#/page2）

3）**當新頁面加載時，大約1/2秒，頁面是白色的。 **

4）Page 2負載，屏幕上有很多圖形。

我們已經嘗試過：

1）設置背景圖片，這是不夠快。例如。

body { 
    background-image: url("/assets/page2_background.png"); 
    background-size: 100%; 
}

2）獲取前一頁（本例中爲主頁）預先緩存下一頁的背景。例如。 On http://localhost:9000/#/：

<img src="assets/page2_background.png" style="display: none">

這些都不夠快，我們仍然可以看到白色背景。我們知道我們也可以設置背景顏色，但沒有顏色可以使轉換看起來很好（下一頁有太多不同的圖形和單獨的顏色）。

關於如何擺脫頁面之間的白色屏幕的任何想法？

編輯：

這是我的路由配置。

.config(function ($routeProvider) { 
    $routeProvider 
     .when('/page2', { 
     templateUrl: 'views/page2.html', 
     controller: 'Page2Ctrl', 
     controllerAs: 'page2' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    })

來源

2016-02-26 Rob

您可以向我們展示路線配置嗎？ – manzapanza

確定它已被添加 – Rob

爲什麼不創建包含背景的父路線，並且僅爲某些URL啓用它？ – Harangue

有多種方式來實現它，

1-使用解決途徑，$routeProvider resolve屬性允許路由改變的延遲，直到數據被加載。

.config(function ($routeProvider) { 
    $routeProvider 
     .when('/page2', { 
     templateUrl: 'views/page2.html', 
     controller: 'Page2Ctrl', 
     controllerAs: 'page2', 
     resolve: { 
      myData: function($q, $http){ 
       var deferred = $q.defer(); 

       // USE it to load data and delay page transition. 
       return deferred.promise; 
      } 
     } 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    })

2 - 使用ngCloak 用一個簡單的標籤後顯示的頁面加載圖標和地方NG-cloack。 ngCloack將隱藏標籤之上的所有內容，直到頁面完全加載。

<div ng-app=""> 

<p ng-cloak> // Your normal HTML page</p> 

</div>

看到這個例子here。

抄自here

來源

2016-03-02 06:20:06

我認爲這兩種方式必須一起使用 – beaver

不幸的是我試圖緩存背景，在$ routeProvider中採用ngCloak和resolve參數，並且在第一次更改視圖時仍然存在緩慢加載（請參閱http：// codepen。 io/beaver71/pen/reavpR） – beaver

http：// codepen。io/anon/pen/wGaPQK在ngclock之外更新了一個額外的標籤，該標籤加載速度很快。而且我多次嘗試，至少對我來說沒有閃爍。 –

切換頁面時出現白色屏幕閃爍

回答

相關問題