Ng-lazyload-image: Comment créer un effet de transition entre defaultImage et lazyLoad

Créé le 26 janv. 2018  ·  3Commentaires  ·  Source: tjoskar/ng-lazyload-image

Bonjour tjoskar. Merci pour cette superbe bibliothèque! Je veux demander s'il est possible de créer un effet de transition entre le defaultImage et l'image chargée paresseusement.

Merci pour l'aide à l'avance

question

Commentaire le plus utile

HI @ AndreasSchmid1 , merci pour vos aimables paroles.

Vous pouvez ajouter une animation sur l'image, par exemple.

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

(voir "Image par défaut" sur la page d'exemple: https://tjoskar.github.io/ng-lazyload-image)

Vous pouvez également ajouter une transition entre les images si vous créez deux images, une avec l'image par défaut et une avec l'image chargée paresseusement. par exemple. https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (voir "Image pixélisée" sur la page d'exemple: https://tjoskar.github.io/ ng-lazyload-image)
Comme vous le savez peut-être, vous pouvez ralentir l'animation pour mieux voir l'animation (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations).

Il est également possible d'ajouter une transition sur le background-image :

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


Voir cette page pour un exemple (sans utiliser ng-lazyload-image): http://jsfiddle.net/8L7775fa/4/

Faites-moi savoir si vous rencontrez des problèmes.

Tous les 3 commentaires

HI @ AndreasSchmid1 , merci pour vos aimables paroles.

Vous pouvez ajouter une animation sur l'image, par exemple.

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

(voir "Image par défaut" sur la page d'exemple: https://tjoskar.github.io/ng-lazyload-image)

Vous pouvez également ajouter une transition entre les images si vous créez deux images, une avec l'image par défaut et une avec l'image chargée paresseusement. par exemple. https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (voir "Image pixélisée" sur la page d'exemple: https://tjoskar.github.io/ ng-lazyload-image)
Comme vous le savez peut-être, vous pouvez ralentir l'animation pour mieux voir l'animation (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations).

Il est également possible d'ajouter une transition sur le background-image :

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


Voir cette page pour un exemple (sans utiliser ng-lazyload-image): http://jsfiddle.net/8L7775fa/4/

Faites-moi savoir si vous rencontrez des problèmes.

Salut tout le monde,
Je développe une application Web en angulaire 5 dans laquelle j'utilise le carrousel d'amorçage ngx et ng-lazyload-image dans ma page html comme ci-dessous.Mon image par défaut se charge avec succès montrant le spinner avant que l'image réelle ne soit chargée.Mais le problème que je suis face est mon image par défaut augmente également en taille selon la taille de mon carrousel. Y a-t-il un moyen de corriger la taille de mon image par défaut

Ci-dessous mon code ------------------------

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

Le defaultImage est une image gif spinner (provient de mon composant) que je veux montrer aux utilisateurs jusqu'à ce que mes images réelles soient chargées ([lazyLoad] = "image.carousel_image_key"). J'ai fixé la taille de mon carrousel comme ci-dessous dans mon css

mainCarouselImgLayout {

bloc de visualisation;
largeur: 100%;
hauteur: 400px
}
Ce même CSS est appliqué sur mon image de spinner Ce que je veux, c'est garder la taille de mon image de spinner intacte et ne changer que la hauteur de l'image du carrousel.

@chandrasachin Avez-vous trouvé la soution?
Ma taille de spinner est vraiment plus grande en carte que mon image. Je souhaite redimensionner l'image de la double flèche pour une taille plus petite

Cette page vous a été utile?
0 / 5 - 0 notes