Bagaimana untuk Menentukan Dimensi Imej Latar Belakang Div Menggunakan jQuery?

Tentukan Dimensi Imej Latar Belakang Div dalam jQuery

Masalah:
Memperoleh lebar dan ketinggian div imej latar belakang menggunakan jQuery nampaknya sukar difahami. Percubaan konvensional seperti $('#myDiv').css('background-image').height(); menghasilkan ralat "bukan fungsi".

Penyelesaian:

Nasib baik, ada penyelesaian yang bijak. Dengan memanfaatkan kuasa mencipta objek Imej baharu, seseorang boleh memastikan dimensi imej walaupun ia tidak ditakrifkan secara eksplisit dalam CSS. Berikut ialah versi skrip yang dikemas kini:

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

// Extract the URL without the url() or url("") wrapper
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

// Proceed if the image URL was obtained
if (image_url[1]) {
    image_url = image_url[1];
    // Create a new Image object
    image = new Image();

    // Trigger an event when the image is loaded
    // This ensures we get the actual image dimensions
    $(image).load(function () {
        alert('Width: ' + image.width + '\nHeight: ' + image.height);
    });

    image.src = image_url;
}

Pendekatan yang Diperbaiki (2018):

Penyelesaian yang lebih komprehensif dibentangkan di bawah, menyediakan fungsi yang dipertingkatkan dan pengendalian ralat:

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

    // Handle existence of image URL
    if (imageUrl) {
        // Create a new Image object
        var image = new Image();
        // Resolve the deferred on load, reject on error
        image.onload = dfd.resolve;
        image.onerror = dfd.reject;
        // Assign the image source
        image.src = imageUrl[1];
    } else {
        // Image not available, reject
        dfd.reject();
    }

    // Return the dimensions if the image loads
    return dfd.then(function() {
        // Return the dimensions as an object
        return { width: this.width, height: this.height };
    });
};

// Sample usage
getBackgroundImageSize(jQuery('#mydiv'))
    .then(function(size) {
        // Success - log the dimensions
        console.log('Image size is: ', size);
    })
    .fail(function() {
        // Error - log failure message
        console.log('Failed to determine image size');
    });

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