角JS：檢測時，頁面內容已經完全呈現，並可見

我的人，所有有自己的個人資料相片和信息的大名單。所有項目都有一些CSS3樣式/動畫。

即時通訊使用：

<li ng-repeat="person in people">

那裏的人們是從外部JSON文件超過150個對象都顯示在同一頁面上的數組。

頁面加載/渲染速度很慢，並不是因爲獲取帶有人的JSON數據的$ http GET函數（它只需要大約100ms），而是頁面的渲染和所有css3的渲染樣式適用於每個項目（如果我關閉它的CSS變得更快）。

我的主要問題

我可以用網頁顯示速度很慢，但我真正想要的是，每當我沉重的頁面加載的內容，以啓動和停止負荷指標檢測活。我試着做出這樣的指令：

directive("peopleList", function() { 
    return function (scope, element, attrs) { 
     scope.$watch("people", function (value) { 
      var val = value || null; 
      console.log("Loading started"); 
      if (val){ 
       console.log("Loading finished"); 
      } 
     }); 
    }; 
});

並把這個指令放在加載我的人列表的包裝div。但是當我的JSON數據對象被填充時，加載似乎停止，這隻需要100ms左右，但是頁面的實際可視化渲染更像4-5s。

我也試過像http://jsfiddle.net/zdam/dBR2r/的解決方案，但我在那裏得到了相同的結果。

我需要的

當我通過我的網頁瀏覽（所有具有相同類型的列表），我需要的東西，告訴我只要頁面有完全加載，對用戶可見，所以我知道什麼時候隱藏我的加載指示器。

來源

2013-09-25 Rocaboca

嘗試增加這個指令 - 神奇的是在鏈接功能：

directives 
    .directive('onFinishRender', function ($timeout) { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attr) { 
     if (scope.$last === true) { 
      scope.$evalAsync(attr.onFinishRender); 
     } 
    } 
    } 
});

添加加載器作爲第一個項目：

<li ng-show="!isDoneLoading"> 
    <div class="loading">Loading...</div> 
</li>

然後在你的禮，補充一點：

<li ng-repeat="..." on-finish-render="isDoneLoading = true;"> ... </li>

來源

2013-10-03 16:30:51 user553086

如果這用於工作，那麼它現在不會。範圍似乎沒有$最後的屬性... – Will

請問，我認爲你必須專門使用ng-repeat（比如OP）作爲$ last來發揮作用：https：//docs.angularjs .ORG/API/NG /指令/ ngRepeat – Trae

角JS：檢測時，頁面內容已經完全呈現，並可見

回答

相關問題