Bagaimana untuk Mendapatkan Dimensi Imej Latar Belakang Div Menggunakan jQuery?

Tentukan Dimensi Imej Latar Belakang dengan jQuery

Pengenalan

Mendapatkan semula dimensi imej latar belakang div menggunakan jQuery mungkin kelihatan mudah tetapi menimbulkan cabaran. Artikel ini menangani tugasan ini dan membentangkan penyelesaian lanjutan yang memudahkan proses.

Soalan:

Pertanyaan: Bagaimana saya boleh mendapatkan imej latar belakang saiz (lebar dan tinggi) div menggunakan jQuery?

Respons A:

Untuk mendapatkan semula dimensi imej latar belakang, gunakan pendekatan berikut:

var image_url = $('#myDiv').css('background-image'),
    image;

// Remove url() or url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
    image_url = image_url[1];
    image = new Image();

    // Load image if needed
    $(image).load(function () {
        alert(image.width + 'x' + image.height);
    });

    image.src = image_url;
}

Respons B (Kemas Kini 2018):

Untuk komprehensif penyelesaian:

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

Penggunaan:

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

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