مرحبًا @ AndreasSchmid1 ، شكرًا على كلماتك الرقيقة.

يمكنك إضافة الرسوم المتحركة على الصورة ، على سبيل المثال.

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

(راجع "الصورة الافتراضية" في صفحة المثال: https://tjoskar.github.io/ng-lazyload-image)

يمكنك أيضًا إضافة انتقال بين الصور إذا قمت بإنشاء صورتين ، إحداهما بالصورة الافتراضية والأخرى بالصورة البطيئة. على سبيل المثال https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (راجع "صورة منقطة" في صفحة المثال: https://tjoskar.github.io/ نانوغرام- lazyload صورة)
كما تعلم ، يمكنك إبطاء الرسوم المتحركة لإلقاء نظرة أفضل على الرسوم المتحركة (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations).

من الممكن أيضًا إضافة انتقال على background-image :

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

md5-a293a4af2fed33e82fce83f3f4407a8e

انظر هذه الصفحة للحصول على مثال (لا تستخدم ng-lazyload-image): http://jsfiddle.net/8L7775fa/4/

اسمحوا لي أن أعرف إذا واجهت مشاكل.

أهلا بكم،
أقوم بتطوير تطبيق ويب في angular 5 حيث أستخدم ngx bootstrap carousel و ng-lazyload-image في صفحة html الخاصة بي على النحو التالي. المواجهة هي صورتي الافتراضية أيضًا يزداد حجمها حسب حجم دائري. هل هناك أي طريقة لإصلاح حجم صورتي الافتراضية

فيما يلي الكود الخاص بي ------------------------

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

الصورة الافتراضية هي صورة gif (تأتي من المكون الخاص بي) والتي أريد عرضها للمستخدمين حتى يتم تحميل صوري الحقيقية ([lazyLoad] = "image.carousel_image_key"). css الخاص بي

mainCarouselImg التخطيط {

العرض محجوب؛
العرض: 100٪؛
الارتفاع: 400 بكسل
}
يتم تطبيق نفس css على صورة spinner الخاصة بي ، ما أريده هو الحفاظ على حجم صورة الدوار الخاص بي كما هو وتغيير ارتفاع الصورة الدائرية فقط. تبدو الصورة الدوارة الآن كبيرة جدًا ومشوهة

chandrasachin هل وجدت
حجم الدوار الخاص بي كبير حقًا في البطاقة مقارنة بصورتي. أريد تغيير حجم صورة القرص الدوار إلى حجم أصغر