如何按順序加載對象數組的圖像？

Question

我有一個看起來像這樣的數組：

$scope.myArray = [
    {name:   'some name',
     age:    '20',
     imgURL: 'some/url.png'
    },
    {name:   'another name',
     age:    '53',
     imgURL: 'some/url2.png'
    }
]

數組中包含約500個對象，所有對象都以ng-repeat的形式加載到頁面上，如下所示：

<div data-ng-repeat="person in myArray">
    <img ng-src="{{person.imgURL}}"/>
</div>

現在，如果用戶位於具有良好無線連接的桌面上，則相對較小的圖像會很快加載到頁面上。 但是上一次我在手機上嘗試時...太粗糙了，因為屏幕上只有大約6張圖像的空間，並且它們沒有任何特定的加載順序。 結果，用戶一直盯着黑屏，直到他們向下滾動或直到頂部圖像加載為止。

我一直在嘗試通過使用promises 強制這些圖像按順序加載的好方法，但是還沒有運氣。 有人對我如何做到這一點有任何想法嗎？ 謝謝！

對於可能好奇的人，后端只是一個通過Angular服務加載的json文件，如下所示：

  $scope.generatePeople = function(){
      getPeopleService.getPeople().then(function(response){
          $scope.myArray = response;
      }, function(error){
      });
  };

.service('getPeopleService', ['$http', '$q', '$rootScope', function($http, $q, $rootScope){
    var getPeople = function() {
        var deferred = $q.defer();
        $http.get('people.json').success(function (data, status, headers, config) {
            deferred.resolve(data);
        }).error(function(data, status, headers, config){
            deferred.reject(status);
        });
        return deferred.promise;
    }
    return({
        getPeople: getPeople
    })
}])

Answer 1

實現此目的的唯一方法是將這些圖像轉換為base64，然后將它們作為一個json響應發送。 這不是您的代碼的問題，而是瀏覽器加載圖像的方式。 另一種方法是通過ajax請求每個圖像，並在另一個完成后請求另一個圖像

如果您不希望用戶凝視空白屏幕，另一種方法是在圖像后面的元素中放置一個微調框，並在圖像加載時覆蓋微調框。

Answer 2

如我的評論中所述，您可以選擇創建一系列Promise.race ，如下所示；

 function racer(proms){ Promise.race(proms) .then(val => { var idx = images.indexOf(val); console.log(val); // doSomething(val); proms.splice(idx,1); images.splice(idx,1); proms.length && racer(proms); }); } var images = [...Array(10)].map((_,i) => ({imageNo : i, loadTime: ~~(Math.random()*9001)+1000})), promises = images.map(img => new Promise((resolve,reject) => setTimeout(_ => resolve(img),img.loadTime))); racer(promises); 

在此模型示例中，我們有一個圖像對象，該對象在1-10秒內隨機加載。 因此，我們生成了由10個這些圖像組成的數組，並將其映射到一個promises數組。 每次比賽結束后，我們都會從promises和images陣列中選出獲勝者，並開始新的比賽。

現在，按照最快到最慢的順序為您提供圖像，您所要做的就是在收到圖像時從上到下將它們插入頁面。