Ng-lazyload-image: Lazyload dan srcset

Hai,

Perpustakaan ini sayangnya tidak mendukung srcset, tetapi harus mendukungnya. Ini adalah fitur yang cukup penting.

Dengan demikian, tidak mudah untuk mendukung karena kita perlu mengurai dan memahami srcset dengan cara yang sama seperti yang dilakukan browser.

Pilihan 1:

Kami memperlakukan srcset sebagai kasus khusus dan tidak mencoba memuat gambar di latar belakang tetapi sebaliknya kami hanya mengatur srcset ketika gambar adalah viewport:
Katakanlah kita memiliki tag html berikut:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
Saat gambar berada di viewport, kita melihat srcset dan mendeteksi bahwa lazyLoad berisi srcset -string dan cukup ubah tag menjadi:
<img srcset="small.jpg 300w, large.jpg 500w">

Pro:
Implementasi sederhana
Menipu:
Pengguna tidak akan pernah melihat "defaultImage".
Kami tidak pernah dapat menangani kesalahan jaringan saat memuat gambar.

Pilihan 2:

Kami mengurai srcset dan memilih opsi terbaik (seperti yang kami pikir seharusnya dilakukan oleh browser).
Katakanlah kita memiliki tag html berikut:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
Kami mendeteksi bahwa lazyLoad berisi srcset dan kami mengurai string menjadi sesuatu seperti:
[ { url: 'small.jpg', width: 300 }, { url: 'large.jpg', width: 500 } ]
Kami membandingkannya dengan lebar browser (dan rasio piksel perangkat ) dan memilih gambar terbaik. Memuat gambar di latar belakang dan ketika dimuat, kami hanya mengatur srcset dan karena gambar ada di cache, itu akan segera dimuat.

Pro:
Gambar akan dimuat lambat
Pengguna akan melihat gambar default.
Kami dapat menangani kesalahan jaringan (haruskah kami mencoba memuat beberapa gambar lain dari srcset atau haruskah kami memuat gambar kesalahan saja ?).
Menipu:
Selalu sulit untuk mengurai string dengan cara yang sama seperti yang seharusnya dilakukan browser; kita mungkin akan kehilangan beberapa kasus penggunaan tepi.
Dari pemahaman saya, browser akan selalu menggunakan gambar terbesar jika disimpan di cache. Karena kita tidak memiliki cara untuk mengetahui apakah gambar telah dimuat, kita harus memuat gambar yang paling pas (tetapi gambar terbesar akan ditampilkan setelah kita menetapkan srcset ). misalnya katakanlah kita memiliki srcset small.jpg 300w, large.jpg 500w dan layarnya kurang dari 500 px tetapi large.jpg sudah dimuat. Dari pemahaman saya, browser seharusnya mengambil large.jpg karena ada di cache tetapi karena kita tidak tahu bahwa kita akan memuat small.jpg dan ketika dimuat kita akan mengatur srcset dan browser akan memilih large.jpg (namun saya bisa saja salah). yaitu kita tidak perlu memuat gambar.

Kesimpulan:

Saya pikir opsi 2 bisa dilakukan (tidak boleh terlalu sulit) dan saya pikir kita harus melakukannya. Namun waktu saya cukup terbatas sekarang tetapi saya dengan senang hati menerima PR :)

Halo @tjoskar , terima kasih atas balasan cepatnya, saya setuju dengan Anda bahwa opsi kedua dapat dilakukan. Saya juga tidak punya banyak waktu sekarang karena saya berada di bawah beberapa tenggat waktu tetapi segera setelah saya punya lebih banyak waktu saya ingin berkontribusi pada fitur ini, terutama mengingat saya sudah memperluas perilaku perpustakaan untuk mendukung malas memuat untuk tag gambar dengan properti hlink.href :)

Atau abaikan opsi srcset browser default dan terapkan sebagai proses pengambilan keputusan Anda sendiri dan sesuaikan dengan waktu untuk membuatnya sebaik mungkin :)

spesifikasi

Anda hanya perlu mematuhi spesifikasi dan saya yakin spesifikasinya cukup mudah.

Tetapi seperti yang Anda tunjukkan, implementasi browser dapat merusak apa yang ingin Anda capai di sini, jadi saya yakin itu harus dilewati.

Saya telah mengirimkan permintaan tarik (#231) yang menambahkan dukungan gambar responsif ke kedua \ Saya menunggu masukan apapun.

Ini termasuk dalam 3.4.0 . Terima kasih @sapierens