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()类似的地方（基于this，但您可以搜索其他方式）

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标志来观察加载过程。

具有大量大图像的页面的角度（1）分页

1 个答案: