AngularJS - 延迟加载视图

AngularJS - Lazy Load Views

本文关键字：视图 延迟加载 AngularJS      更新时间：2023-09-26

我正在创建一个单页主网站，并希望通过延迟加载低于当前可见视图的视图来减少初始页面加载时间并节省用户带宽。主页将相当长，带有导航、页眉、多个内容部分和页脚。我的目标是最初加载一个带有导航和粘性页脚以及"根"角度应用程序的静态布局容器。滚动或单击导航链接将导致加载下一个可查看视图（单击向下跳转到多个视图的导航链接应加载用户将跳过的所有视图）。我知道这个任务有一个jQuery库，但我想坚持使用Angular。

有没有一种简单的方法可以在 Angular 中以这种方式有条件地加载视图？

这是我想出的，只是一个快速的例子。有很多方法可以做到这一点。如果你想要更多的微调，你甚至可以编写自己的指令，而不是使用ng-include/ng-repeat。

现场演示在这里嗯，plnkr 现在遇到了一些问题。如果页面甚至会加载，它有时似乎无法找到模板（请参阅控制台日志。它正在尝试加载它们，因此代码工作正常）。这也是一个 jsbin 演示，但模板不会加载任何内容（空）。

<div ng-repeat="lazy in loaded">
  {{lazy}}
  <div ng-include="lazy"></div>
</div>
<button ng-click="loadNext()">Load Next</button>
<button ng-click="unload()">Reset</button>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var toLoad = [ //list the templates to be loaded
    'tmpl.html',
    'tmpl2.html',
    'tmpl3.html'
  ];
  $scope.loaded = []; //anything in here will be loaded to the page
  $scope.loadNext = function() {
    if (toLoad.length) { //if there are any item left to load
      $scope.loaded.push(toLoad.splice(0, 1)[0]); //move first item to "loaded"
    }
  };
  $scope.unload = function() {
    toLoad = $scope.loaded.splice(0, $scope.loaded.length); //move all items back to "toLoad"
  };
});
相关文章：