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

Question

我有一个页面显示大量大图像，当用户单击下一个按钮时，我从数组中获取下一批大图像。在点击下一页按钮之前，我怎样才能加载下一页图像（从谷歌云存储中获取）？ 目前下一页加载非常缓慢，因为角等待所有要加载的图像。

示例代码：

控制器功能：

$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标志观看负荷procces。