如何使用 jQuery 取得 Div 背景影像的大小？

使用jQuery 獲取Div 背景圖像大小

在Web 開發中，獲取用作特定div 元素背景的圖像的大小出於各各種原因可能是有益的。無論是響應式佈局還是基於圖像尺寸建立動態內容，jQuery 都提供了一種通用方法來檢索此資訊。

jQuery 的圖片大小檢索方法

jQuery，一個流行的 JavaScript 函式庫，提供了一種檢索背景圖片屬性（包括大小）的方法。然而，直接從背景圖像 CSS 屬性中提取尺寸可能會很棘手。相反，jQuery 加載和操作圖像的能力使我們能夠獲取所需的資訊。

透過 jQuery 延遲物件檢索大小

一種有效的方法是使用 jQuery 的延遲物件處理影像載入和尺寸檢索。這種方法確保非同步執行，允許程式碼在圖像載入時繼續執行。這是實作：

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

此程式碼載入影像，在成功載入後檢索其尺寸，並將該過程包裝在延遲物件中。這使開發人員能夠處理成功和失敗的映像載入場景，從而提供更強大的實現。

以上是如何使用 jQuery 取得 Div 背景影像的大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！