具有大量大图像的页面的 Angular (1) 分页

【问题标题】：Angular (1) pagination for pages with a lot of large images具有大量大图像的页面的 Angular (1) 分页
【发布时间】：2017-10-16 06:09:03
【问题描述】：

我有一个显示很多大图像的页面，当用户单击下一步按钮时，我从数组中获取下一批大图像。在单击下一页按钮之前，如何加载下一页图像（取自谷歌云存储）？目前下一页加载非常缓慢，因为 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]" />
....

【问题讨论】：

标签： javascript angularjs image pagination

【解决方案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 标志来观察加载过程。

【讨论】：