angularjs - img - subir imagen angular 4

Establecer la imagen predeterminada antes de cargar la imagen real

Question

En mi aplicación, se cargan varias imágenes, sin embargo, cuando se abre la vista, puede ver claramente cada imagen que se está cargando, con esto quiero decir que aparece la mitad superior de la imagen y sigue aumentando hasta que se muestra la imagen completa. No quiero esto.

Mis imágenes están dentro de una ng-repeat , lo que quiero hacer es cuando la página se carga, todas las imágenes se configuran en una imagen predeterminada que viene incluida con la aplicación. Ahora, una vez que mi función ha devuelto todas las URL de imágenes nuevas y esas imágenes se han cargado por completo, deben reemplazar las imágenes predeterminadas.

Así que básicamente así:

1. Vista abierta
2. Establecer todas las imágenes a default.jpg
3. Obtener datos.
4. Espere a que las imágenes nuevas se carguen por completo.
5. Reemplace las imágenes predeterminadas con una nueva URL de imagen extraída del servidor.

Nunca he hecho esto antes y no sé cómo hacerlo.

Answer 1

Puedes escribir así:

<div ng-repeat="user in users">
    {{user.name}}<br>
    <img src="/images/foo/demp/default.png" actual-image="{{user.avatar}}" />
</div>

Entonces puedes usar una directiva como:

myApp.directive(''actualImage'', [''$timeout'', function($timeout) {
    return {
         link: function($scope, element, attrs) {
             function waitForImage(url) {
                 var tempImg = new Image();
                 tempImg.onload = function() {
                     $timeout(function() {
                         element.attr(''src'', url);
                     });
                 }
                 tempImg.src = url;
             }

             attrs.$observe(''actualImage'', function(newValue) {
                 if (newValue) {
                     waitForImage(newValue);
                 }
             });
         }
    }
}]);