Ng-lazyload-image: Cara membuat efek transisi antara defaultImage dan lazyLoad

Dibuat pada 26 Jan 2018  ·  3Komentar  ·  Sumber: tjoskar/ng-lazyload-image

Halo tjoskar. Terima kasih untuk perpustakaan yang luar biasa ini! Saya ingin bertanya apakah mungkin untuk membuat efek transisi antara defaultImage dan gambar yang dimuat lambat.

Terima kasih atas bantuannya sebelumnya

question

Komentar yang paling membantu

HI @ AndreasSchmid1 , terima kasih atas kata-kata baik Anda.

Anda dapat menambahkan animasi pada gambar, misalnya.

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

(lihat "Gambar default" di halaman contoh: https://tjoskar.github.io/ng-lazyload-image)

Anda juga dapat menambahkan transisi antar gambar jika Anda membuat dua gambar, satu dengan gambar default dan satu lagi dengan lazyloaded. misalnya. https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (lihat "Gambar berpiksel" di halaman contoh: https://tjoskar.github.io/ ng-lazyload-image)
Seperti yang Anda ketahui, Anda dapat memperlambat animasi untuk melihat animasi dengan lebih baik (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations).

Dimungkinkan juga untuk menambahkan transisi pada background-image :

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


Lihat halaman ini untuk contoh (tidak menggunakan ng-lazyload-image): http://jsfiddle.net/8L7775fa/4/

Beri tahu saya jika Anda mengalami masalah.

Semua 3 komentar

HI @ AndreasSchmid1 , terima kasih atas kata-kata baik Anda.

Anda dapat menambahkan animasi pada gambar, misalnya.

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

(lihat "Gambar default" di halaman contoh: https://tjoskar.github.io/ng-lazyload-image)

Anda juga dapat menambahkan transisi antar gambar jika Anda membuat dua gambar, satu dengan gambar default dan satu lagi dengan lazyloaded. misalnya. https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (lihat "Gambar berpiksel" di halaman contoh: https://tjoskar.github.io/ ng-lazyload-image)
Seperti yang Anda ketahui, Anda dapat memperlambat animasi untuk melihat animasi dengan lebih baik (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations).

Dimungkinkan juga untuk menambahkan transisi pada background-image :

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


Lihat halaman ini untuk contoh (tidak menggunakan ng-lazyload-image): http://jsfiddle.net/8L7775fa/4/

Beri tahu saya jika Anda mengalami masalah.

Halo semua,
Saya mengembangkan aplikasi web di sudut 5 di mana saya menggunakan ngx bootstrap carousel dan ng-lazyload-image di halaman html saya seperti di bawah ini. Gambar default saya berhasil memuat spinner sebelum gambar asli benar-benar dimuat. Tapi masalahnya saya menghadap adalah gambar default saya juga bertambah ukurannya sesuai ukuran carousel saya. Apakah ada cara untuk memperbaiki ukuran gambar default saya?

Di bawah ini adalah kode saya ------------------------

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

DefaultImage adalah gambar gif spinner (berasal dari komponen saya) yang ingin saya perlihatkan kepada pengguna sampai gambar asli saya dimuat ([lazyLoad] = "image.carousel_image_key"). Saya telah memperbaiki ukuran carousel saya seperti di bawah ini css saya

mainCarouselImgLayout {

tampilan: blok;
lebar: 100%;
tinggi: 400px
}
CSS yang sama ini diterapkan pada gambar spinner saya. Yang saya inginkan adalah menjaga ukuran gambar spinner saya tetap utuh dan hanya mengubah tinggi gambar carousel. Saat ini gambar spinner terlihat sangat besar dan terdistorsi

@chandrasachin Apakah Anda menemukan soution?
Ukuran spinner saya sangat besar di kartu daripada gambar saya. Saya ingin mengubah ukuran gambar pemintal untuk ukuran yang lebih kecil

Apakah halaman ini membantu?
0 / 5 - 0 peringkat