角度 (1) 分页，用于包含大量大图像的页面

Question

>我有一个页面显示了很多大图像，当用户单击下一步按钮时，我从一个数组中得到下一批大图像。如何在单击下一页按钮之前加载下一页图像（从谷歌云存储中获取）？目前，下一页加载速度非常慢，因为 angular 等待所有图像加载。

示例代码：

控制器功能：

$scope.nextImage = function() {   
  $scope.index += 1;
  $scope.images = images[$scope.index]
}

.html：

<img ng-src="images[0]" />
<img ng-src="images[1]" />
<img ng-src="images[2]" />
....

Answer 1

您需要在

设置当前图像后立即预加载下一个图像列表

$scope.nextImage = function() {   
  $scope.index += 1;
  $scope.images = images[$scope.index];
  if($scope.index < MAX_IMAGE_LIST_COUNT) {      
    $scope.isLoading = true;
    preload(images[$scope.index + 1]);
  }
}

preload()在哪里（基于此，但您可以搜索其他方式）

function preload(imageArray, index) {
  index = index || 0;
  if (imageArray && imageArray.length > index) {
    var img = new Image ();
    img.onload = function() {
        preload(imageArray, index + 1);
    }
    img.src = images[$scope.index + 1][index];
    return;
  }
  $scope.isLoading = false;
}

我还添加了 isLoading 标志来监视加载过程。