Comment déterminer les dimensions de l'image d'arrière-plan d'une division à l'aide de jQuery ?

Déterminer les dimensions de l'image d'arrière-plan d'une div dans jQuery

Problème :
Acquérir la largeur et la hauteur d'une div l'image d'arrière-plan utilisant jQuery semble insaisissable. Tentatives conventionnelles comme $('#myDiv').css('background-image').height(); donne l'erreur « pas une fonction ».

Solution :

Heureusement, une solution ingénieuse existe. En tirant parti de la puissance de création d'un nouvel objet Image, on peut connaître les dimensions de l'image même si elles ne sont pas explicitement définies dans le CSS. Voici une version mise à jour du script :

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

Approche améliorée (2018) :

Une solution plus complète est présentée ci-dessous, offrant des fonctionnalités et une gestion des erreurs améliorées :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!