Skrip Lazyload seperti Imej

Salah satu penambahbaikan terbaik pada html sejak beberapa tahun kebelakangan ini ialah atribut loading="lazy" yang boleh anda tambahkan pada imej (juga iframes) yang akan memberitahu penyemak imbas untuk tidak memuatkan imej sehingga ia berada dalam port pandangan.

    <img src="/images/your-image.png" loading="lazy">

Sangat mudah, sangat berguna. Tetapi bukankah lebih baik jika anda boleh melakukan ini untuk skrip juga. Supaya anda boleh dengan malas memuatkan komponen anda, hanya jika/apabila ia benar-benar diperlukan...

Nah, satu lagi menampilkan elemen mempunyai, ialah keupayaan untuk menjalankan skrip selepas imej dimuatkan (atau tidak dimuatkan) dengan atribut onload dan onerror.

    <img 
        src="/images/your-image.png" 
        loading="lazy"
        onload="() => console.log('image loaded')"
    >

"Panggil balik" onload ini hanya akan dicetuskan apabila imej itu dimuatkan, dan jika imej itu dimuatkan dengan malas, maka ia akan menyala hanya apabila imej berada dalam port pandangan. Et voilà! Skrip yang dimuatkan dengan malas.

Malangnya macam ni tak banyak guna. Pertama anda akan mempunyai imej yang tidak diingini pada halaman anda, dan kedua, anda perlu menyelaraskan javascript yang anda mahu jalankan, yang agak mengalahkan tujuan pemuatan malas. Jadi, mari buat beberapa perubahan untuk memperbaiki perkara ini.

Imej itu sendiri boleh menjadi apa-apa sahaja, atau, yang lebih penting, tiada apa-apa. Seperti yang saya nyatakan sebelum ini terdapat panggilan balik onerror, yang - seperti namanya - akan menyala apabila imej tidak dimuatkan.

Ini tidak bermakna anda perlu menghalakan src kepada imej yang tidak wujud, yang akan menghasilkan konsol yang penuh dengan ralat 404 merah tentang imej yang hilang, dan tiada siapa yang menginginkannya.

Panggil balik onerror juga menyala jika imej src sebenarnya bukan imej, dan cara paling mudah untuk melakukannya ialah "mengekod dengan teruk" imej menggunakan format data:. Ini juga mempunyai faedah untuk tidak mengisi konsol dengan amaran imej yang hilang ?

    <img 
        src="data:," 
        loading="lazy"
        onerror="() => console.log('image not loaded')"
    >

Ini masih akan menyebabkan halaman mempunyai lakaran kecil "imej rosak", tetapi kita akan melakukannya.

Ok, Tetapi kita masih perlu menyelaraskan javascript yang ingin kita jalankan, jadi bagaimana kita membetulkannya?

Nah, kini sokongan modul ES hampir universal, kami boleh menggunakan teknik pemuatan javascript event-import-then-default yang sangat berkuasa untuk memuatkan skrip selepas acara dicetuskan, seperti:

    <img 
        src="data:," 
        loading="lazy"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >

Nota: Ini juga berfungsi untuk acara onclick, onchange, dll.
Nota: Garis bawah hanyalah cara ringkas untuk mengakses Modul, anda juga boleh menulis .then(Modul => Module.default(this))

Ok, jadi apa yang berlaku di sini!?

Mula-mula mari kita lihat rupa beberapa komponen:

// some-component.js

export default element => {
    element.outerHTML = `
        <div class="whatever">
            <p>Hello world!</p>
        </div>
    `;
}

Jadi, anda mungkin perasan bahawa dalam panggilan balik onerror, saya menyerahkan ini sebagai hujah kepada eksport lalai. Sebab saya melakukan ini (maafkan kata kata ?) adalah untuk memberikan skrip yang memanggilnya, kerana dalam ini (saya melakukannya sekali lagi ?) konteks ini = .

Kini anda hanya boleh element.outerHTML untuk menggantikan imej yang rosak dengan penanda html anda dan di sana anda mempunyainya, skrip yang dimuatkan malas! ?

Caching, dan Melewati Argumen

Jika, anda menggunakan teknik ini lebih daripada sekali pada halaman, maka anda perlu menghantar indeks "cache-busting" atau nombor rawak kepada data:, cth, sesuatu seperti:

    <img 
        src="data:,abc123" 
        loading="lazy"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >
    <img 
        src="data:,xyz789" 
        loading="lazy"
        onerror="import('/js/some-other-component.js').then(_ => _.default(this))"
    >

Rentetan selepas ":," boleh jadi apa sahaja, asalkan berbeza.

Cara yang sangat mudah untuk menghantar param kepada fungsi adalah dengan menggunakan atribut data-sesuatu dalam html seperti:

    <img 
        src="data:," 
        loading="lazy"
        data-message="hello world"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >

Memandangkan kami menghantar ini kepada fungsi, anda boleh mengakses atribut data seperti:

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        <div class="whatever">
            <p>${message}</p>
        </div>
    `;
}

Sila beritahu saya pendapat anda dalam komen! ❤️

Atas ialah kandungan terperinci Skrip Lazyload seperti Imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!