Angularjs attendi fino a div immagine-sfondo di sfondo mostra

Question

Ho il seguente ng-repeat che acquisisce i dati da una chiamata $http.post e li memorizza in $scope.data.

<div ng-repeat="key in [] | range:data.pages"> 
    <div class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}"> 
    <!-- some random stuff here --> 
</div> 

cosa normale che accade è la classe .pageBackground verrà caricato prima che l'immagine di sfondo fa sullo schermo. Mi piacerebbe che non si presentasse nulla fino a quando lo background-image non è stato caricato, ma non sono stato in grado di capirlo.

Qualcuno ha qualche suggerimento?

Answer 1

È possibile ritardare la funzione di avvio fino al caricamento dell'immagine.

var img = new Image(); 
    img.onload = function(){ 
    loadData(); 
    }; 
    img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; 

Poi pose ng-if="imageLoaded" in html e set che true nella funzione loadData.

Answer 2

Non sono sicuro che esista una soluzione reale per il tuo problema. Una soluzione alternativa potrebbe essere l'uso dell'oggetto Image, come spiegato in this answer. Per esempio come una direttiva:

angular.module("yourModule").directive("showOnceBackgroundLoaded", [function() { 
    return { 
    restrict: "A", 
    scope: false, 
    link: function (scope, element, attributes) { 
     element.addClass("ng-hide"); 
     var image = new Image(); 
     image.onload = function() { 
     // the image must have been cached by the browser, so it should load quickly 
     scope.$apply(function() { 
      element.css({ backgroundImage: 'url("' + attributes.showOnceBackgroundLoaded + '")' }); 
      element.removeClass("ng-hide"); 
     }); 
     }; 
     image.src = attributes.showOnceBackgroundLoaded; 
    } 
    }; 
}]); 

Usa:

<div ng-repeat="key in [] | range:data.pages"> 
    <div class="pageBackground" id="page_{{ (key+1) }}" show-once-background-loaded="/images/{{data.id}}/{{(key+1)}}.png"> 
    <!-- some random stuff here --> 
</div> 

Answer 3

Ecco una direttiva che incorpora la vostra immagine come sfondo, e attende di manifestarsi fino a quando dopo che l'immagine è stata caricata. È possibile includere variabili all'interno del parametro "mysrc" come necessario per generare immagini diverse (ad esempio all'interno di una ng-repeat).

angular.module('foo', []) 
 
    .directive('myPageBackground', function() { 
 
    return { 
 
     scope: { 
 
     key: '=', // used for ID of the element; if you set the ID externally to the directive you could omit this 
 
     mysrc: '=' // used for the URL of the desired background image 
 
     }, 
 
     template: '<div ng-show="showMe" class="pageBackground" id="page_{{key}}" ng-style="{\'background-image\':\'url({{mysrc}})\'}"></div>', 
 
     link: function(scope) { 
 
     var img = new Image(); 
 
     img.onload = function() { 
 
      scope.showMe = true; 
 
      scope.$apply(); 
 
     }; 
 
     img.src = scope.mysrc; 
 
     } 
 
    } 
 
    });

.pageBackground { 
 
    width: 200px; height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="foo"> 
 
    <!-- Done with hardcoded values here, just for demo: --> 
 
    <div my-page-background key="'1'" mysrc="'http://placehold.it/200x200'"></div> 
 
    <div my-page-background key="'2'" mysrc="'http://placehold.it/150x150'"></div> 
 
    <div my-page-background key="'3'" mysrc="'http://placehold.it/100x100'"></div> 
 
</div>

Answer 4

Se si sta utilizzando sempre lo stesso class="pageBackground", allora l'immagine di sfondo è sempre lo stesso. È possibile caricare nella immagine nascosta, quindi il browser memorizza nella cache:

<img src="url" style="display:none;"/> 

O precaricare con javascript nella pagina di carico:

var img = new Image(); 
img.src = 'some url'; 

Credo che post è attivato con l'interazione dell'utente, che avviene sicuramente dopo che la pagina è stata caricata, quindi l'immagine si trova già nel browser e apparirà immediatamente quando si applica class="pageBackground"

Spero che questo aiuti!

Answer 5

È possibile utilizzare la direttiva ngSrc anziché un div. Inoltre, è possibile provare a utilizzare una piccola libreria di immagini con caricamento lazy come ng-lazy-img.

Spero che questo aiuti!

Answer 6

Ecco un esempio completamente funzionante che utilizza l'oggetto Immagine.

function AppCtrl($scope) { 
 
    $scope.images = [{ 
 
    src: 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg' 
 
    }, { 
 
    src: 'https://farm9.staticflickr.com/8455/8048926748_1bc624e5c9_d.jpg' 
 
    }]; 
 
    angular.forEach($scope.images, function(image) { 
 
    var img = new Image(); 
 
    img.onload = function() { 
 
     $scope.$apply(function() { 
 
     image.loadedSrc = image.src; 
 
     }); 
 
    }; 
 
    img.src = image.src; 
 
    }); 
 
}

.hasSrc { 
 
    color: purple; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <div ng-controller="AppCtrl"> 
 
    <div ng-repeat="image in images" ng-class="{ hasSrc: !!image.loadedSrc }" style="background-image: url({{image.loadedSrc}})"> 
 
     <h2>THIS IS SOME TEXT BEING USED</h2> 
 
     <p> 
 
     This text is being used for illustration purposes only. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Dovrebbe essere abbastanza facile da adattare questo per soddisfare i vostri scopi.

Answer 7

È possibile ricevere aiuto da promesse angolari. Se l'immagine è caricata come promesso, renderà la vista diversa.

È già possibile verificare questo collegamento.

preloading-images-in-angularjs-with-promises

Grazie

Answer 8

Guardate qui per una soluzione:

How can I tell when a CSS background image has loaded? Is an event fired?

quello che fai è di creare un elemento socio invisibile caricare la stessa immagine. se e solo se quell'immagine è stata caricata (evento onload) mostri il tuo altro elemento, ad esempio:

<div ng-repeat="key in [] | range:data.pages" ng-init="_imageLoaded={}"> 
    <div ng-show="_imageLoaded[$index]" class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}"> 
    <img ng-show="false" src="/images/{{data.id}}/{{(key+1)}}.png" onload="_imageLoaded[$index] = true;" /> 
    <!-- some random stuff here --> 
</div>