HI @ AndreasSchmid1 , obrigado por suas amáveis ​​palavras.

Você pode adicionar uma animação à imagem, por exemplo.

img.ng-lazyloaded {
  animation: fadein .5s;
}
<strong i="8">@keyframes</strong> fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

(consulte "Imagem padrão" na página de exemplo: https://tjoskar.github.io/ng-lazyload-image)

Você também pode adicionar uma transição entre as imagens se criar duas imagens, uma com a imagem padrão e outra com lazyload. por exemplo. https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (consulte "Imagem pixelada" na página de exemplo: https://tjoskar.github.io/ ng-lazyload-image)
Como você deve saber, você pode diminuir a velocidade da animação para ver melhor a animação (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations).

Também é possível adicionar uma transição no background-image :

#image {
  height: 250px;
  width: 500px;
  transition: background-image 1s ease-out;
}

md5-a293a4af2fed33e82fce83f3f4407a8e

Veja esta página para um exemplo (sem usar ng-lazyload-image): http://jsfiddle.net/8L7775fa/4/

Deixe-me saber se você tiver problemas.

Olá a todos,
Estou desenvolvendo um aplicativo da web no angular 5 em que estou usando carrossel de bootstrap ngx e ng-lazyload-image na minha página html como abaixo. Minha imagem padrão carrega com êxito, mostrando o botão giratório antes que a imagem real seja realmente carregada. Mas o problema estou de frente é minha imagem padrão também aumenta de tamanho de acordo com o tamanho do meu carrossel. Existe alguma maneira de corrigir o tamanho da minha imagem padrão

Abaixo está meu código ------------------------

[lazyLoad] = "image.carousel_image_key"
[deslocamento] = "deslocamento">

O defaultImage é uma imagem gif giratória (vem do meu componente) que eu quero mostrar aos usuários até que minhas imagens reais sejam carregadas ([lazyLoad] = "image.carousel_image_key"). Fixei o tamanho do meu carrossel como abaixo em meu css

mainCarouselImgLayout {

display: bloco;
largura: 100%;
altura: 400px
}
Este mesmo css é aplicado na minha imagem giratória. O que eu quero é manter o tamanho da minha imagem giratória intacta e apenas alterar a altura da imagem do carrossel. Agora a imagem giratória parece muito grande e distorcida

@chandrasachin Você achou soution?
O tamanho do meu botão giratório é muito maior no cartão do que na minha imagem. Quero redimensionar a imagem giratória para um tamanho menor