Gunakan jQuery untuk mengganti gambar yang rosak menggunakan Ajax

Gantikan gambar yang rosak dengan jQuery dan ajax

Artikel ini memperluaskan artikel terdahulu mengenai mengesan dan memadam imej yang rosak, dan meneroka cara yang mendalam bagaimana untuk menggantikan imej yang rosak dengan jQuery dan Ajax. Kebanyakan penyemak imbas memaparkan tag alt apabila imej tidak dijumpai. Ini boleh menjadi masalah jika imej kecil dan tag alt panjang, kerana lebar output elemen nampaknya tidak dipaksa dibatasi oleh panjang tag alt. Oleh itu, masuk akal untuk menggantikan imej yang rosak dengan imej lalai.

Dapatkan maklumat mengenai gambar semasa di halaman

$("img").each( function () {
    console.log($(this).attr('src')+ ' ' + $(this).attr('alt') + ' ' + $(this).width());
});

Gunakan Ajax untuk menguji sama ada imej wujud

$("img").each( function () 
{
    $.ajax({
        url:$(this).attr('src'),
        type:'HEAD',
        error:
            function(){
                //图片不存在
                console.log('ERROR');
            },
        success:
            function(){
                //图片存在
                console.log('success');
            }
    });
});
/*
输出：
success
success
ERROR
success
success
*/

menyegarkan gambar

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); //清除缓存

Gunakan Ajax untuk membaiki gambar yang rosak

Sila ambil perhatian bahawa _this dan e.status ditambah.

$(".productBoxImage img").each( function () 
{
    var _this = $(this);

    $.ajax({
        url:$(this).attr('src'),
        type:'HEAD',
        async: false,
        error:
            function(e)
            {
                if (e.status == '404') {
                    $(_this).attr('src',[replaceImageUrl]);
                }
            }
    });
});

Versi fungsi non-ajax

/**
 * 返回true表示图片损坏，false表示图片正常
 * @param {jQuery} image 单个图片元素
 * @return {Boolean}
 */
isImageBroken: function(image)
{
    $image = $(image);
    if($image.attr('complete') == false || $image.attr('naturalWidth') == 0 || $image.attr('readyState') == 'uninitialized' || this.trim($image.attr('src')) == '')
    {
        return true;
    }
    return false;
},

Saya harap perkara di atas mudah difahami. Sekiranya anda mempunyai sebarang pertanyaan, sila tinggalkan mesej di kawasan komen! :)

Soalan Lazim (Soalan Lazim) menggunakan jQuery untuk membaiki imej yang rosak secara automatik

Apakah konsep asas jQuery membaiki gambar yang rosak?

Konsep asas jQuery membaiki imej yang rosak adalah menggunakan

peristiwa. Acara ini dicetuskan apabila ralat berlaku semasa memuatkan fail luaran (seperti gambar). Dalam konteks imej, kita boleh menggunakan acara ini untuk menggantikan sumber imej ( atribut) dengan imej lalai atau imej letak apabila imej asal gagal dimuatkan. error src bagaimana menggunakan acara

di jQuery untuk memperbaiki imej yang rosak?

error untuk menggunakan

acara dalam jQuery, anda perlu memilih imej dan mengikat peristiwa

kepada mereka. Dalam fungsi pengendali acara, anda boleh menukar sumber imej ke imej lalai. Berikut adalah contoh asas: error error

Bolehkah saya menggunakan imej tertentu sebagai pengganti untuk setiap imej yang rosak?

$('img').error(function(){
  $(this).attr('src', 'default.jpg');
});

Ya, anda boleh menggunakan imej tertentu sebagai pengganti untuk setiap imej yang rosak. Anda hanya perlu mengubah suai atribut

dalam fungsi pengendali acara

. Sebagai contoh, jika anda ingin menggantikan imej yang rosak dengan imej yang dinamakan "spesifik.jpg", anda boleh melakukan ini: error src

Adakah mungkin menggunakan imej pengganti yang berbeza untuk setiap imej yang rosak?

$('img').error(function(){
  $(this).attr('src', 'specific.jpg');
});

Ya, anda boleh menggunakan imej pengganti yang berbeza untuk setiap imej yang rosak. Anda boleh melakukan ini dengan menggunakan fungsi untuk menentukan imej penggantian berdasarkan syarat -syarat tertentu. Sebagai contoh, anda boleh menggunakan atribut

imej untuk menentukan imej penggantian.

alt Bagaimana menggunakan atribut

imej untuk menentukan imej penggantian?

alt anda boleh menentukan imej penggantian dengan mengakses atribut

dalam fungsi pengendali acara

untuk menggunakan atribut error imej. Berikut adalah contoh: alt alt

Bagaimana jika saya mahu menggunakan imej lalai hanya apabila imej penggantian gagal dimuatkan?

$('img').error(function(){
  var alt = $(this).attr('alt');
  $(this).attr('src', alt + '.jpg');
});

Jika anda hanya mahu menggunakan imej lalai apabila imej pengganti juga gagal memuatkan, anda boleh mengikat acara

ke imej sekali lagi dalam fungsi pengendali acara

. Berikut adalah contoh: error

$("img").each( function () {
    console.log($(this).attr('src')+ ' ' + $(this).attr('alt') + ' ' + $(this).width());
});

Bolehkah saya menggunakan kaedah ini untuk imej yang rosak di bahagian tertentu halaman?

Ya, anda boleh menggunakan kaedah ini untuk imej yang rosak di bahagian tertentu halaman. Anda hanya perlu mengubah suai pemilih untuk memilih gambar di bahagian itu. Sebagai contoh, jika anda ingin membetulkan imej di dalam div dengan id "kandungan", anda boleh melakukan ini:

$("img").each( function () 
{
    $.ajax({
        url:$(this).attr('src'),
        type:'HEAD',
        error:
            function(){
                //图片不存在
                console.log('ERROR');
            },
        success:
            function(){
                //图片存在
                console.log('success');
            }
    });
});
/*
输出：
success
success
ERROR
success
success
*/

Adakah ada cara untuk mengetahui sama ada imej itu telah diganti?

Ya, ada cara untuk mengetahui sama ada imej itu telah diganti. Anda boleh menambah kelas ke imej dalam fungsi pengendali acara error. Anda kemudian boleh menggunakan kelas ini untuk gaya imej pengganti atau memilihnya untuk pemprosesan selanjutnya. Berikut adalah contoh:

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime()); //清除缓存

Bolehkah saya menggunakan kaedah ini untuk membetulkan imej yang rosak yang ditambahkan secara dinamik ke halaman?

Ya, anda boleh menggunakan kaedah ini untuk menetapkan imej yang rosak yang ditambahkan secara dinamik ke halaman. Anda hanya perlu menggunakan kaedah on dan bukannya kaedah error untuk mengikat acara error. Kaedah ini membolehkan anda mengikat peristiwa ke unsur -unsur yang ditambah ke halaman selepas menubuhkan pengendali acara. Berikut adalah contoh:

$(".productBoxImage img").each( function () 
{
    var _this = $(this);

    $.ajax({
        url:$(this).attr('src'),
        type:'HEAD',
        async: false,
        error:
            function(e)
            {
                if (e.status == '404') {
                    $(_this).attr('src',[replaceImageUrl]);
                }
            }
    });
});

Bagaimana jika saya mahu melakukan operasi lain apabila imej gagal dimuatkan, selain menggantikan imej?

Jika anda ingin melakukan operasi lain apabila imej gagal dimuatkan, anda boleh menambah kod dalam fungsi pengendali acara error. Sebagai contoh, anda boleh log mesej ke konsol:

/**
 * 返回true表示图片损坏，false表示图片正常
 * @param {jQuery} image 单个图片元素
 * @return {Boolean}
 */
isImageBroken: function(image)
{
    $image = $(image);
    if($image.attr('complete') == false || $image.attr('naturalWidth') == 0 || $image.attr('readyState') == 'uninitialized' || this.trim($image.attr('src')) == '')
    {
        return true;
    }
    return false;
},

NOTA: Laluan Imej

perlu digantikan dengan laluan imej sebenar. Oleh kerana saya tidak dapat mengakses sistem fail tempatan, gambar tidak dapat dipaparkan. /uploads/20250301/174079005067c2592224c8d.jpg

Atas ialah kandungan terperinci Gunakan jQuery untuk mengganti gambar yang rosak menggunakan Ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!