Cara Memuatkan Imej Secara Asynchronous dengan jQuery: Panduan Langkah demi Langkah

Pemuatan Imej Asynchronous dengan jQuery

Menyelaraskan pemuatan dan paparan imej pada halaman web anda boleh memberi kesan ketara kepada prestasinya. Memuatkan imej secara tidak segerak memastikan gangguan minimum kepada pengalaman pengguna dengan memberikan kawalan ke atas susunan dan masa pemuatan imej. jQuery, pustaka JavaScript serba boleh, menawarkan kaedah mudah untuk mengendalikan tugas tak segerak, termasuk pemuatan imej.

Pemuatan Imej Asynchronous Menggunakan XMLHttpRequest

Satu pendekatan untuk memuatkan imej secara tidak segerak ialah dengan menggunakan objekXMLHttpRequest (XHR). Walau bagaimanapun, kaedah ini menimbulkan cabaran, terutamanya apabila menghadapi ralat atau menetapkan tamat masa untuk menangkap 404 respons.

Kaedah Alternatif: Memanipulasi Elemen Imej

Kaedah yang lebih dipercayai untuk memuatkan secara tidak segerak imej melibatkan penciptaan elemen img, menetapkan atribut sumbernya kepada URL imej dan memerhati peristiwa pemuatannya. Pendekatan dipacu peristiwa ini memberikan kawalan yang lebih besar terhadap pengendalian ralat pemuatan dan menyemak ketersediaan imej.

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('Broken image!');
        } else {
            $("#something").append(img);
        }
    });

Dalam coretan kod ini:

• Elemen img baharu dicipta dan sumbernya ialah ditetapkan kepada URL imej yang dikehendaki.
• Pendengar acara on('load') dilampirkan pada elemen img, yang akan dipanggil sebaik sahaja imej dimuatkan sepenuhnya.
• Dalam pendengar acara, sifat lengkap, naturalWidth dan naturalHeight disemak untuk mengesahkan jika imej telah berjaya dimuatkan. Jika mana-mana syarat ini tidak dipenuhi, mesej ralat dipaparkan.
• Jika imej berjaya dimuatkan, ia dilampirkan pada
  elemen dengan ID "sesuatu".

Atas ialah kandungan terperinci Cara Memuatkan Imej Secara Asynchronous dengan jQuery: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!