Penulis materi, terjemahan yang kami terbitkan hari ini, Eddie Osmani dari Google, mengatakan bahwa sudah ada di
Chrome 75 dukungan untuk atribut baru elemen
pemuatan <img> dan
<iframe> mungkin muncul. Ini berarti bahwa elemen-elemen ini akan mendukung fitur standar untuk apa yang disebut "pemuatan malas" data.
Jika Anda ingin mengetahui bagaimana penggunaan atribut baru dalam kode, lihat contoh ini:
<img align="center" src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe>
Sekarang kita akan berbicara tentang bagaimana atribut
loading akan bekerja.
Informasi awal
Halaman web sering menyertakan banyak gambar, yang memengaruhi ukuran halaman, mengarah pada
peningkatan berlebihan , dan memengaruhi kecepatan memuat halaman. Banyak gambar yang ditampilkan pada halaman berada di luar area yang terlihat. Untuk melihat gambar seperti itu, pengguna perlu menggulir halaman.
Secara historis, untuk membatasi dampak pada waktu pemuatan halaman gambar yang terletak di luar area yang terlihat dari halaman, programmer harus menggunakan pustaka JavaScript (seperti
LazySizes ). Pustaka-pustaka ini memungkinkan Anda untuk menunda pemuatan gambar-gambar tersebut sampai saat ketika pengguna, menggulir halaman, tidak cukup dekat dengan mereka.
Halaman memuat 211 gambar. Versi halaman yang tidak digunakan untuk membuat pemuatan gambar malas segera memuat 10 MB data grafik. Halaman yang sama menggunakan lazy loading (menggunakan LazySizes) hanya memuat 250 Kb informasi grafis. Segala sesuatu yang lain dimuat saat pengguna bergerak di halaman. Detail percobaan ini dapat ditemukan di webpagetest.org .Bagaimana jika browser dapat membantu programmer menghindari memuat gambar yang berada di luar area halaman yang terlihat? Ini akan memiliki efek menguntungkan pada kecepatan memuat data di area yang terlihat dari halaman, akan mengurangi, pada perangkat berdaya rendah, jumlah total data yang dikirimkan melalui jaringan, akan mengurangi konsumsi memori. Semua ini akan segera dimungkinkan berkat atribut baru elemen
loading <img> dan
<iframe> .
Memuat atribut
Atribut
loading memungkinkan browser untuk menunda memuat konten elemen
<img> dan
<iframe> yang berada di luar area yang terlihat dari halaman sampai pengguna menggulir halaman cukup dekat dengan elemen-elemen ini. Atribut ini mendukung tiga nilai:
lazy : menunjuk ke materi yang merupakan kandidat yang bagus untuk pemuatan malas.eager : Bahan dalam elemen dengan nilai atribut ini harus segera dimuat.auto : browser akan memutuskan apakah akan menerapkan pemuatan malas ke materi dengan nilai atribut ini.
Jika Anda tidak menentukan nilai atribut
loading , ini akan setara dengan menyetelnya ke
auto .
Saat ini, atribut pemuatan untuk elemen <img> dan <iframe> berada di bawah standar HTMLContohnya
Atribut
loading berfungsi dengan elemen
<img> (termasuk atribut
srcset dan di dalam elemen
<picture> ), serta dengan elemen
<iframe> .
<img align="center" src="unicorn.jpg" loading="lazy" alt=".."/> <img align="center" src="unicorn.jpg" loading="eager" alt=".."/> <img align="center" src="unicorn.jpg" loading="auto" alt=".."/> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img align="center" src="fallback.jpg" loading="lazy"> </picture> <img align="center" src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf" loading="lazy"> <iframe src="video-player.html" loading="lazy"></iframe>
Perlu dicatat bahwa kami menggunakan formulasi di sini seperti berikut: "ketika pengguna menggulir halaman sehingga area yang terlihat dekat elemen". Browser menentukan saat yang tepat ketika gambar mulai memuat. Secara umum, kami dapat berharap bahwa browser akan mulai mengunduh materi yang unduhannya telah ditunda, beberapa saat sebelum area halaman yang memuatnya dapat dilihat oleh pengguna. Ini akan meningkatkan kemungkinan pengunduhan dan keluaran materi yang relevan akan selesai pada saat pengguna melihatnya.
Harap perhatikan bahwa saya
menyarankan agar atribut yang dimaksud disebut
loading , karena pendekatan penamaan ini sesuai dengan yang digunakan ketika memilih nama untuk atribut
decoding . Kalimat sebelumnya, seperti
lazyload , tidak berfungsi, karena atribut ini diperlukan untuk mendukung beberapa nilai (
lazy ,
eager dan
auto ).
Periksa dukungan browser untuk memuat atribut
Kami memperhitungkan pentingnya kemungkinan menggunakan pustaka JavaScript untuk mengatur pemuatan materi yang malas (untuk dukungan lintas-browser untuk fitur ini). Anda dapat memeriksa apakah browser mendukung atribut
loading dengan:
<script> if ('loading' in HTMLImageElement.prototype) {
Perhatikan bahwa atribut
loading dapat digunakan untuk secara progresif mengembangkan kemampuan halaman. Browser yang mendukung atribut ini akan dapat mengatur pemuatan materi yang malas menggunakan
loading=lazy , dan browser yang tidak mendukung fitur ini hanya akan mengunduh materi ini seperti sebelumnya.
Pemuatan gambar lintas browser malas
Jika dukungan lintas-browser untuk pemuatan gambar malas penting, maka itu tidak cukup hanya untuk menentukan apakah browser mendukung fitur ini, dan jika tidak, gunakan pustaka yang sesuai jika Anda menggunakan desain seperti
<img align="center" src=unicorn.jpg loading=lazy /> untuk menggambarkan gambar di markup
<img align="center" src=unicorn.jpg loading=lazy /> .
Di markup, Anda perlu menggunakan sesuatu seperti
<img data-src=unicorn.jpg /> (daripada
src ,
srcset atau
<source> ) untuk menghindari pemuatan gambar secara normal oleh browser yang tidak mendukung atribut baru. Untuk mengubah atribut seperti itu ke atribut yang perlu digunakan dengan dukungan atribut
loading browser, atau untuk mengunduh pustaka yang sesuai jika atribut ini tidak didukung, Anda dapat menggunakan JavaScript.
Berikut adalah contoh bagaimana ini terlihat:
<img align="center" src="hero.jpg" alt=".."/> <img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/> <script> (async () => { if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll("img.lazyload"); images.forEach(img => { img.src = img.dataset.src; }); } else { </script>
Pertimbangkan beberapa fitur kode ini:
- Gambar yang terlihat oleh pengguna segera setelah halaman dijelaskan menggunakan tag
<img> . Menggunakan atribut data-src tanpa src akan menyebabkan gambar tidak segera ditampilkan setelah memuat halaman, oleh karena itu, mengatur gambar-gambar yang harus terlihat segera setelah memuat halaman, kita harus menentukan atribut src . - Saat menggambarkan gambar yang tidak langsung terlihat oleh pengguna setelah memuat halaman, kami menggunakan atribut
data-src . Ini dilakukan untuk mencegah mereka memuat secara normal di browser yang tidak mendukung atribut loading . Jika browser mendukung atribut ini, kami mengubah data-src ke src . - Jika atribut
loading tidak didukung, kami memuat pustaka bantu (lazySizes) dan menginisialisasi itu. Di sini kita menggunakan class=lazyload untuk mengarahkan pustaka LazySizes ke gambar yang ingin kita gunakan dengan menggunakan teknik pemuatan malas.
Demo
Di sini Anda dapat melihat contoh halaman tempat pemuatan malas 100 gambar kucing dilakukan. Tetapi, jika tertarik, unduhan video dari halaman ini.
Fitur implementasi untuk memuat dukungan atribut di Chrome
Kami sangat menyarankan bahwa sebelum menggunakan atribut
loading dalam produksi, tunggu dukungannya muncul di rilis stabil Chrome. Jika Anda ingin mencoba kesempatan ini, maka mungkin Anda akan tertarik dengan apa yang akan kita bicarakan.
Memuat uji atribut
Untuk mengalami atribut baru sekarang, buka halaman pengaturan bendera Chrome (
chrome://flags ), aktifkan
Enable lazy frame loading dan
Enable lazy image loading bendera
Enable lazy image loading , dan mulai ulang browser.
Pengaturan browser
Penerapan metode pemuatan materi yang malas di Chrome tidak hanya didasarkan pada seberapa dekat area yang terlihat dari halaman dengan materi ini, tetapi juga pada kecepatan koneksi. Ambang batas untuk memicu pemuatan materi yang malas untuk kecepatan koneksi yang berbeda dikode dalam kode, tetapi nilai-nilai ini dapat diganti menggunakan baris perintah. Berikut adalah contoh pengaturan utama untuk gambar:
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://mathiasbynens.be/demo/img-loading-lazy'
Perintah di atas sesuai dengan pengaturan default saat ini. Agar pemuatan gambar dimulai jika posisi gulir halaman adalah 400 piksel dari gambar, semua nilai dalam perintah ini harus diubah menjadi 400. Berikut ini adalah contoh variasi 1-piksel dari perintah ini (pengaturan ini digunakan dalam video di atas )
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=1,lazyImageLoadingDistanceThresholdPxOffline=1,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=1,lazyImageLoadingDistanceThresholdPx4G=1 'https://mathiasbynens.be/demo/img-loading-lazy'
Sangat mungkin bahwa konfigurasi standar pemuatan malas di Chrome akan berubah karena penerapan fitur ini menjadi stabil dalam beberapa minggu mendatang.
Alat Pengembang
Fitur penerapan dukungan untuk atribut
loading di Chrome adalah bahwa browser, saat memuat halaman, meminta 2 KB gambar pertama dari server jika mendukung teknologi permintaan rentang. Gambar 2 KB pertama mungkin berisi informasi tentang ukurannya. Ini memungkinkan browser untuk menghasilkan placeholder yang memiliki ukuran yang sesuai dengan ukuran gambar. Selain itu, dalam 2K ini, jika kita berbicara tentang gambar kecil seperti ikon, sangat mungkin seluruh gambar disertakan.
Memuat fragmen file grafikChrome mengunduh data gambar yang tersisa saat pengguna hampir melihatnya. Saat bekerja dengan alat pengembang, ini dapat mengarah pada fakta bahwa informasi tentang dua unduhan gambar dapat "muncul" di panel Jaringan, dan informasi tentang dua permintaan yang dilakukan untuk mengunduh setiap gambar akan ditampilkan di panel Pengaturan Waktu Sumber Daya.
Server dukungan browser menentukan atribut pemuatan
Jika kita hidup di dunia yang sempurna, untuk mengetahui apakah perlu menggunakan perpustakaan tambahan untuk output halaman yang benar di browser tertentu, kita tidak harus bergantung pada analisis browser menggunakan JavaScript sisi klien. Dengan pendekatan ini, server, yang mengetahui sebelumnya apakah perpustakaan seperti itu dibutuhkan atau tidak, akan memasukkan (atau tidak memasukkan) perpustakaan itu di halaman yang dikirim ke browser. Pemeriksaan semacam itu dapat dimungkinkan menggunakan teknologi
Petunjuk Klien HTTP , berkat mana klien dapat mengirimkan "petunjuk" tentang kemampuannya ke server.
"Petunjuk" terkait tentang dukungan untuk atribut
loading sekarang pada tahap awal
pertimbangan .
Ringkasan
Penulis materi ini mengundang semua orang yang tertarik menggunakan atribut
loading saat bekerja dengan elemen
<img> dan
<iframe> untuk mencobanya dan membagikan kesan
mereka dengannya . Dia terutama tertarik untuk belajar tentang bagaimana, dari sudut pandang pengembang, mekanisme dukungan lintas-browser yang diusulkan di sini untuk memuat data seperti malas, dan tentang apakah ia melewatkan beberapa kasus batas ketika berbicara tentang mekanisme tersebut.
Pembaca yang budiman! Apakah Anda berencana menggunakan atribut
loading di proyek Anda?
