Angulaire (1) pagination pour les pages avec beaucoup de grandes images

Question

J'ai une page qui montre beaucoup de grandes images, lorsque l'utilisateur clique sur le bouton suivant, je reçois à partir d'un tableau le lot suivant de grandes images. Comment puis-je charger la page suivante d'images (qui proviennent de google cloud storage) avant de cliquer sur le bouton de la page suivante? Actuellement la page suivante se charge très lentement car angulaire attend toutes les images à charger.

code Exemple:

fonction de contrôleur

:

$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

Vous devez précharger la liste de vos images suivantes juste après votre configuration actuelle un

Où preload() est quelque chose comme (basé sur this, mais vous pouvez rechercher une autre manière)

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; 
} 

J'ai aussi ajouté le drapeau isLoading pour regarder les procces de charge.