Bagaimanakah Saya Boleh Mendapatkan Saiz Imej Latar Belakang Div Menggunakan jQuery?

Mendapatkan Saiz Imej Latar Belakang Div dengan jQuery

Dalam pembangunan web, mendapatkan saiz imej yang digunakan sebagai latar belakang untuk elemen div tertentu boleh memberi manfaat kerana pelbagai sebab. Sama ada untuk susun atur responsif atau membina kandungan dinamik berdasarkan dimensi imej, jQuery menawarkan pendekatan serba boleh untuk mendapatkan maklumat ini.

Pendekatan jQuery untuk Mendapatkan Saiz Imej

jQuery, perpustakaan JavaScript yang popular, menyediakan kaedah untuk mendapatkan semula sifat imej latar belakang, termasuk saiz. Walau bagaimanapun, ia boleh menjadi sukar untuk mengekstrak saiz terus daripada sifat CSS imej latar belakang. Sebaliknya, keupayaan jQuery untuk memuatkan dan memanipulasi imej membolehkan kami memperoleh maklumat yang diingini.

Mendapatkan Saiz melalui jQuery Deferred Object

Satu kaedah berkesan melibatkan penggunaan jQuery's Deferred Object untuk mengendalikan pemuatan imej dan pengambilan saiz. Pendekatan ini memastikan pelaksanaan tak segerak, membolehkan kod diteruskan semasa imej dimuatkan. Berikut ialah pelaksanaannya:

var getBackgroundImageSize = function(el) {
    var imageUrl = $(el).css('background-image').match(/^url\(["']?(.+?)["']?\)$/);
    var dfd = new $.Deferred();

    if (imageUrl) {
        var image = new Image();
        image.onload = dfd.resolve;
        image.onerror = dfd.reject;
        image.src = imageUrl[1];
    } else {
        dfd.reject();
    }

    return dfd.then(function() {
        return { width: this.width, height: this.height };
    });
};

// Usage
getBackgroundImageSize(jQuery('#mydiv'))
    .then(function(size) {
        console.log('Image size is', size.width, size.height);
    })
    .fail(function() {
        console.log('Could not get size because could not load image');
    });

Kod ini memuatkan imej, mendapatkan semula dimensinya apabila berjaya dimuatkan dan membungkus proses itu dalam Objek Tertunda. Ini membolehkan pembangun mengendalikan kedua-dua senario pemuatan imej yang berjaya dan gagal, memberikan pelaksanaan yang lebih mantap.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Saiz Imej Latar Belakang Div Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!