Bolehkah Imej Dimuatkan Secara Asynchronous dengan jQuery?

Memuatkan Imej Tak Segerak dengan jQuery

Soalan:

Mencuba memuatkan imej luaran secara tak segerak menggunakan jQuery dengan kod berikut:

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

menghasilkan respons ralat. Adakah pemuatan imej tak segerak mungkin dengan jQuery? Jika tidak, bagaimanakah imej boleh dimuatkan secara tak segerak?

Penyelesaian:

Pemuatan imej tak segerak memang boleh dilakukan dengan jQuery. Walau bagaimanapun, kaedah $.ajax() tidak sesuai untuk tugas ini. Sebaliknya, pendekatan pilihan adalah untuk mencipta elemen imej baharu secara dinamik dan melampirkan pengendali acara padanya:

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);
        }
    });

Kaedah ini menggunakan mekanisme pemuatan imej HTML5 asli, yang mencetuskan acara pemuatan apabila imej telah sepenuhnya dimuatkan. Dengan menyemak sifat lengkap, naturalWidth dan naturalHeight, anda boleh menentukan sama ada imej telah berjaya dimuatkan dan mengelakkan amaran imej rosak.

Atas ialah kandungan terperinci Bolehkah Imej Dimuatkan Secara Asynchronous dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!