Wie bestimme ich die Hintergrundbildabmessungen eines Divs mit jQuery?

Bestimmen Sie die Hintergrundbildabmessungen von Divs in jQuery

Problem:
Ermitteln der Breite und Höhe eines Divs Hintergrundbild mit jQuery scheint schwer fassbar. Herkömmliche Versuche wie $('#myDiv').css('background-image').height(); erhalte den Fehler „keine Funktion“.

Lösung:

Glücklicherweise gibt es eine geniale Lösung. Durch die Nutzung der Möglichkeiten der Erstellung eines neuen Bildobjekts können Bildabmessungen ermittelt werden, auch wenn diese nicht explizit im CSS definiert sind. Hier ist eine aktualisierte Version des Skripts:

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

Verbesserter Ansatz (2018):

Im Folgenden wird eine umfassendere Lösung vorgestellt, die verbesserte Funktionalität und Fehlerbehandlung bietet:

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

Das obige ist der detaillierte Inhalt vonWie bestimme ich die Hintergrundbildabmessungen eines Divs mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!