ng-src: Bir resim yüklenmeden önce bir çakmağı göster

Question

Kullanıcının düğmelerden birini tıklatarak bir dizi görüntüden geçebileceği bir arayüz uyguladık. Resim URL'leri Bir dizide saklanır ve dinamik angularjs değiştirilir:

<img ng-src="{currentUrl}"> 

Ancak ardışık görüntüler için istekleri önceki görüntü görüntülenir beri biraz ve görüntü değişikliği belirgin değildir gecikme eğiliminde yenisi gelene kadar.

Resmi gırtla ile değiştirmek istiyorum (animasyonlu gif). Bunu Angular.js kullanarak nasıl başarabilirim?

Answer 1

bunu yüklendiğinde yol değişiklikleri ve görüntüyü her gösterdiğinde bir döndürücü ile görüntüyü değiştirir bir yönerge ile yapabilirsiniz.

<img my-src="{currentUrl}"> 

    app.directive("mySrc", function() { 
    return { 
     link: function(scope, element, attrs) { 
     var img, loadImage; 
     img = null; 

     loadImage = function() { 

      element[0].src = "pathToSpinner"; 

      img = new Image(); 
      img.src = attrs.mySrc; 

      img.onload = function() { 
      element[0].src = attrs.mySrc; 
      }; 
     }; 

     scope.$watch((function() { 
      return attrs.mySrc; 
     }), function(newVal, oldVal) { 
      if (oldVal !== newVal) { 
      loadImage(); 
      } 
     }); 
     } 
    }; 
    }); 

Bu kod çoğunlukla CoffeeScript tarafından oluşturulur.

Answer 2

Bunu CSS ile yapabilirsiniz. Img etiketinin arka planını animasyonlu gif'e ayarlayın. Resim yüklenene kadar arka plan gösterilecektir.

img{ 
     background-image: url('throbber.gif') no-repeat; 
    } 

Answer 3

Bir yönerge kullanın, aşağıdaki yönerge yalnızca tek bir görüntü için çalışır, ancak öğenin imageIndex veya src özniteliğindeki değişiklikleri algılamak için attr.$watch kullanmak isteyeceksiniz.

myModule.directive('imgLoader', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs, controllers) { 
     // get the parent and chuck bg image in 
     var parent = element.parent(); 
     parent.css('background-image', 'url("path-to-throbber.gif")'); 
     parent.css('background-repeat', 'no-repeat'); 
     // when it loads, hide the bg 
     element.load(function() { 
      parent.css('background-image',''); 
      parent.css('background-repeat',''); 
     }); 
    } 
    } 
}); 

Hep ng-src özelliğini kullanın ama izlemek için başka bir özellik var, sonra sadece "src" özelliğini kaynak resim değişiklikleri set olamazdı.

Umut bu

Answer 4

ben onun oldukça geç bilmesine yardımcı olur ama ben senin yükleyici img gösterecektir varsayılan ve dynamicImageURL çözüme kavuşturulacağını zaman sonra, görüntü açısal yerini alacaktır tarafından

<img src="img/loader.gif" ng-src={{dynamicImageURL}}> 

gibi yapacağız.