react cool img
v1.2.12
Ini adalah komponen React <Img /> yang ringan, yang membantu Anda menangani gambar UX (pengalaman pengguna) dan optimasi kinerja sebagai pria profesional?
Ini memberdayakan tag img standar oleh banyak fitur keren tanpa melanggar pengalaman pengembangan asli Anda. Idealnya, ini bisa menjadi pengganti tag img untuk React.js.
⚡️ Demo langsung: https://react-cool-img.netlify.app
❤️ Itu ️ itu di github atau tweet tentang itu.
Placeholder untuk memenuhi berbagai status pemuatan gambar (misalnya gambar pemuatan> gambar aktual> gambar kesalahan).
Pemuatan malas pintar dengan cara performant dan efisien, menggunakan persimpangan pengamat.
Mekanisme retretsi otomatis bawaan. Pengguna tidak akan melewatkan informasi penting Anda.
Membatalkan setiap unduhan gambar saat ini pada komponen yang tidak terpotensi menghemat sumber daya bandwidth dan browser.
Mendukung rendering sisi server / javascript dinonaktifkan / SEO.
Mendukung definisi tipe TypeScript.
Ukuran kecil (~ 2kb Gzipped). Tidak ada dependensi eksternal, selain untuk react dan react-dom .
Mudah digunakan.
️ Sebagian besar browser modern mendukung persimpangan pengamat secara asli. Anda juga dapat menambahkan Polyfill untuk dukungan browser penuh.
react-cool-img didasarkan pada react hooks. Itu membutuhkan react v16.8+ .
Paket ini didistribusikan melalui NPM.
$ benang tambahkan react-cool-IMG# atau $ npm instalasi-Save React-Cool-IMG
Alat peraga default komponen telah disesuaikan untuk tujuan memuat optimasi. Mari kita mulai sebagai contoh berikut.
Impor IMG dari "react-cool-img"; // Sarankan untuk menggunakan gambar loadingImage berkualitas rendah atau vektor dari "./images/loading.gif"; Import ErrorImage dari" ./images/error.svg";const app = ( ) => (
<ImgplaceHolder = {loadingImage} src = "https: // the-image-url" error = {errorImage} alt = "react cool img"
/>); Tidak ingin placeholder gambar? Jangan khawatir, Anda dapat menggunakan gaya inline atau CSS untuk itu. Komponen sepenuhnya kompatibel dengan pengalaman pengembangan tag img normal.
Impor IMG dari "react-cool-img"; const app = () => (
<Imgstyle = {{backgroundColor: "grey", lebar: "480", tinggi: "320"}} src = "https: // the-image-ubl" alt = "react cool img"
/>); Komponen gambar yang bekerja serupa dengan tag img standar dan dengan alat peraga berikut.
| Menopang | Jenis | Bawaan | Keterangan |
|---|---|---|---|
src | rangkaian | Sumber gambar. Itu required .Format dukungan | |
srcSet | rangkaian | Sumber gambar untuk gambar responsif. Hanya untuk prop src .Artikel referensi | |
sizes | rangkaian | Ukuran gambar untuk gambar responsif. Hanya untuk prop src .Artikel referensi | |
width | rangkaian | Lebar gambar di PX. | |
height | rangkaian | Tinggi gambar di px. | |
placeholder | rangkaian | Sumber gambar placeholder. Format dukungan | |
error | rangkaian | Sumber gambar kesalahan. Ini akan menggantikan gambar placeholder. Format dukungan | |
alt | rangkaian | Teks alternatif untuk bagian gambar. | |
decode | Boolean | true | Gunakan img.decode () untuk pra-dekode gambar sebelum membuatnya. Berguna untuk mencegah utas utama memblokir dengan mendecoding gambar besar. |
lazy | Boolean | true | Nyalakan/Mati/Mati Lazy Loading. Menggunakan pengamat persimpangan |
cache | Boolean | true | Langsung memuat gambar yang telah di -cache bila memungkinkan untuk membatalkan perilaku pemuatan malas. Artikel referensi |
debounce | nomor | 300 | Berapa banyak yang harus ditunggu dalam milidetik bahwa gambar harus berada di viewport sebelum mulai memuat. Ini dapat mencegah gambar diunduh saat pengguna menggulir dengan cepat melewatinya. |
observerOptions | obyek | { root: window, rootMargin: '50px', threshold: 0.01 } | Lihat bagian ObserverOptions. |
retry | obyek | { count: 3, delay: 2, acc: '*' } | Lihat bagian coba lagi. |
... | Temukan lebih banyak alat peraga dan acara. |
Semua properti adalah optional .
root: Element | null - Elemen yang digunakan sebagai viewport untuk memeriksa visibilitas target. Harus menjadi leluhur target. Default ke viewport browser jika tidak ditentukan atau jika null .
rootMargin: string - margin di sekitar root. Dapat memiliki nilai yang mirip dengan properti margin CSS, misalnya "10px 20px 30px 40px" (atas, kanan, bawah, kiri). Nilainya bisa persentase. Himpunan nilai ini berfungsi untuk tumbuh atau mengecilkan setiap sisi kotak pembatas elemen root sebelum menghitung persimpangan.
threshold: number - satu angka antara 0 dan 1, yang menunjukkan berapa persentase visibilitas target yang harus dieksekusi. Nilai 0 berarti segera setelah satu piksel terlihat, panggilan balik akan dijalankan. 1 berarti ambang batas tidak dipertimbangkan sampai setiap piksel terlihat.
Semua properti adalah optional .
count: number - Menentukan berapa kali Anda ingin mencoba lagi. Atur ke 0 akan menonaktifkan retry otomatis.
delay: number - Menentukan keterlambatan antara retries dalam detik.
acc: string | false - Menentukan bagaimana penundaan harus diakumulasikan dengan setiap coba lagi. Itu menerima nilai -nilai berikut:
'*' (default) - Gandakan penundaan setelah setiap kali coba lagi dengan nilai delay yang diberikan, misalnya delay: 2 berarti coba lagi akan berjalan setelah 2 detik, 4 detik, 8 detik, dan seterusnya.
'+' - Penundaan Penambahan Setelah masing -masing coba lagi dengan nilai delay yang diberikan, misalnya delay: 2 berarti coba lagi akan berjalan setelah 2 detik, 4 detik, 6 detik, dan seterusnya.
false - Jaga agar penundaan konstan antara retries, misalnya delay: 2 berarti coba lagi akan berjalan setiap 2 detik.
Pemuatan gambar malas melalui API pengamat persimpangan itu bagus. Tetapi mungkinkah lebih besar untuk mengunduh gambar hanya jika pengguna ingin melihatnya? Atau memotong pemuatan malas untuk gambar yang di -cache? Jawabannya adalah ya dan fitur-fitur ini sudah dibangun menjadi react-cool-img oleh debounce dan props cache .
Dengan prop debounce , gambar dapat menunggu untuk diunduh saat berada di viewport untuk waktu yang ditentukan. Dalam kasus di mana Anda memiliki daftar panjang gambar yang mungkin digulir pengguna melalui secara tidak sengaja. Pada saat ini memuat gambar dapat menyebabkan pemborosan bandwidth dan waktu pemrosesan yang tidak perlu.
Impor IMG dari "react-cool-img"; impor defaultimg dari "./images/default.svg";cconst app = () => (
<ImgplaceHolder = {defaultImg} src = "https: // the-image-url" debounce = {1000} // default adalah 300 (ms) alt = "react cool img"
/>); Dengan prop cache , gambar yang sudah Anda cache akan membatalkan pemuatan malas sampai pengguna mengunjungi aplikasi Anda lain kali. Pemuatan malas diatur untuk gambar yang tersisa yang tidak di -cache. Ini bermanfaat untuk UX, karena tidak ada banyak pekerjaan tambahan untuk memuat gambar yang di -cache segera dan merupakan kemenangan yang mudah untuk membuat UI terlihat lebih intuitif.
Impor IMG dari "react-cool-img"; impor defaultimg dari "./images/default.svg";cconst app = () => (
<ImgplaceHolder = {defaultImg} src = "https: // the-image-url" cache // default benar, hanya untuk demoalt = "react cool img"
/>); Ada dua tantangan saat melakukan pemuatan gambar malas dengan rendering sisi server. Salah satunya adalah ketersediaan JavaScript yang lain adalah SEO. Untungnya, kami dapat menggunakan tag <noscript> untuk menyelesaikan masalah ini. Ini akan membuat gambar aktual sebagai fallback jika JavaScript dinonaktifkan sehingga pengguna tidak akan melihat gambar yang macet dengan placeholder. Selain itu, tag <noscript> memastikan gambar diindeks oleh bot mesin pencari bahkan jika mereka tidak dapat sepenuhnya memahami kode JavaScript kami. Lihatlah bagaimana keajaiban terjadi.
// src/img.tsxconst img = () => {
// ...
return (<> <imgclass = "gambar" src = "https: // the-placeHolder-image" alt = "tidak ada sihir"/> <noscript> <img class = "gambar" src = "https: // the -mita-aktual "alt =" keajaiban dimulai di sini ... "/> </noscript> </>
);}; Pengamat persimpangan memiliki dukungan yang baik di antara browser, tetapi tidak universal. Anda harus melakukan browser polyfill yang tidak mendukungnya. Polyfills adalah sesuatu yang harus Anda lakukan secara sadar pada tingkat aplikasi. Oleh karena itu react-cool-img tidak termasuk itu.
Anda dapat menggunakan Polyfill W3C:
$ YARN Tambahkan persimpangan-observer# atau $ npm instalasi-Save Intersection-Observer
Kemudian impor di titik masuk aplikasi Anda:
impor "persimpangan-pengamat";
Atau gunakan impor dinamis untuk hanya memuat file saat polyfill diperlukan:
(async () => {
if (! ("IntersectionObserver" di jendela)) menunggu impor ("persimpangan-observer");}) ();Polyfill.io adalah cara alternatif untuk menambahkan polyfill saat dibutuhkan.
Terima kasih kepada orang -orang yang luar biasa ini (Kunci Emoji):
Dengan baik ? |
Proyek ini mengikuti spesifikasi semua-kontributor. Kontribusi apa pun yang baik!
