Bagaimana untuk memuatkan imej secara tidak segerak dalam jquery

Dalam pembangunan bahagian hadapan, gambar adalah salah satu kandungan yang biasa kami gunakan, bagaimanapun, untuk sesetengah halaman dengan jumlah gambar yang banyak, memuatkan semuanya sekali gus boleh menyebabkan halaman bertindak balas dengan perlahan dan mengurangkan pengalaman pengguna. teknologi pemuatan tak segerak perlu digunakan untuk mengoptimumkan prestasi halaman. jQuery ialah perpustakaan JavaScript yang sangat baik yang menyediakan kaedah mudah untuk memuatkan imej secara tidak segerak.

Berikut akan memperkenalkan cara memuatkan imej secara tidak segerak dalam jQuery.

1. Malas memuatkan imej

Malas memuatkan bermaksud memuatkan imej hanya apabila pengguna menatal ke kawasan yang boleh dilihat. Teknologi ini boleh mengoptimumkan prestasi pemuatan halaman dan meningkatkan pengalaman pengguna.

Untuk melaksanakan pemuatan malas dalam jQuery, anda boleh menggunakan pemalam lazyload. Ini ialah pemalam ringan yang tidak memerlukan terlalu banyak kod Anda hanya perlu menambah kelas yang ditentukan pada imej yang perlu dimuatkan dengan malas, dan kemudian memanggil kaedah pemalam.

Langkah-langkahnya adalah seperti berikut:

1. Muat turun pemalam lazyload dan perkenalkan perpustakaan jQuery.

2. Tambahkan atribut kelas pada imej yang perlu dimuatkan secara malas dalam HTML, seperti yang ditunjukkan di bawah:

<img class="lazyload" data-src="image.png">

3. Panggil kaedah lazyload dalam JavaScript dan nyatakan kelas imej itu perlu dimuatkan dengan malas.

$(function(){
    $("img.lazyload").lazyload();
});

Perlu diingatkan bahawa alamat sebenar imej perlu dinyatakan dalam atribut data-src, bukan atribut src. Dengan cara ini alamat imej asal tidak akan dimuatkan serta-merta, tetapi akan dimuatkan apabila diperlukan.

2. Pramuat imej

Pramuat bermakna memuatkan imej yang diperlukan terlebih dahulu, apabila diperlukan, imej yang dicache digunakan secara langsung tanpa membuat permintaan rangkaian. Teknik ini boleh meningkatkan kelajuan paparan halaman dan pengalaman pengguna.

Untuk pramuat imej dalam jQuery, anda boleh menggunakan kaedah pramuat Kod adalah seperti berikut:

$.preload = function(){
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
        $("<img>").attr("src", arguments[i]);
    }
}

Kaedah ini menerima berbilang alamat imej sebagai parameter, dan kemudian menggunakan jQuery untuk mencipta teg img secara dinamik. dan tentukan atribut src sebagai alamat Imej yang perlu dipramuat. Dengan cara ini, apabila imej ini perlu dipaparkan, ia boleh diambil terus dari cache tempatan tanpa membuat permintaan rangkaian.

Kaedah ini boleh dipanggil semasa halaman dimuatkan, contohnya:

$.preload("image1.png", "image2.png", "image3.png");

Kesan pramuat imej tidak jelas, tetapi ia boleh mempercepatkan paparan imej dengan berkesan apabila keadaan rangkaian kurang baik .

3. Pemuatan tertunda imej

Pemuatan tertunda bermaksud memuatkan beberapa imej yang diperlukan secara tidak segerak selepas halaman dimuatkan. Teknologi ini boleh mengelakkan memuatkan semua imej skrin pertama, menyebabkan pemuatan halaman perlahan.

Untuk melaksanakan pemuatan malas dalam jQuery, anda boleh menggabungkan teknologi pemuatan malas dan pramuat untuk mencapai kesan yang serupa dengan pemuatan malas.

Perlu diambil perhatian bahawa pemuatan tertunda adalah kurang berkesan daripada pemuatan malas kerana ia memerlukan pemuatan tak segerak imej selepas halaman dimuatkan.

Ringkasan

Pemuatan imej tak segerak boleh mengoptimumkan prestasi pemuatan halaman dengan berkesan dan meningkatkan pengalaman pengguna. Untuk melaksanakan pemuatan tak segerak bagi imej dalam jQuery, anda boleh menggunakan tiga teknologi: pemuatan malas, pramuat dan pemuatan tertunda Teknologi ini mempunyai kelebihan dalam senario yang berbeza.

Pemuatan malas boleh mengelakkan memuatkan terlalu banyak imej serentak, menyebabkan respons halaman yang perlahan dan meningkatkan kelajuan paparan halaman dan pengalaman pengguna. Pramuat boleh meningkatkan kelajuan paparan imej dan mengelakkan masa menunggu yang disebabkan oleh permintaan rangkaian. Pemuatan tertunda boleh menggabungkan kelebihan pemuatan malas dan pramuat, serta memuatkan imej secara tidak segerak selepas halaman dimuatkan untuk mengelakkan respons halaman perlahan yang disebabkan oleh memuatkan semua imej skrin pertama.

Atas ialah kandungan terperinci Bagaimana untuk memuatkan imej secara tidak segerak dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!