如何使用 jQuery 可靠地取得背景影像的尺寸？

在jQuery 中確定背景圖像尺寸

使用jQuery 檢索div 背景圖像的尺寸（寬度和高度）的任務看起來像是簡單，但它帶來了一些挑戰。

最初，嘗試利用jQuery('#myDiv').css('background-image').height() 可能會導致錯誤訊息，表明它不是函數。為了克服這個問題，我們探索了替代方法。

一種解決方案包括從背景圖像樣式中提取圖像 URL 並創建一個 Image 物件來載入圖像。當圖像加載成功後，我們可以訪問其寬度和高度屬性以獲得所需的尺寸。但是，此方法需要 DOM 操作，並且可能對影像檔案名稱中的某些字元敏感。

為了解決這些問題，我們提出了一個改進的解決方案，將程式碼封裝在名為 getBackgroundImageSize 的函數中。此函數利用 jQuery 的延遲物件來處理非同步影像載入並提供錯誤處理。另外，它採用了更健壯的正規表示式來匹配各種URL格式，保證了對不同瀏覽器和jQuery版本的兼容性。

getBackgroundImageSize的用法很簡單。只需提供 jQuery 元素作為參數，它就會傳回一個承諾。如果圖像載入成功，promise 將解析為包含背景圖像的寬度和高度的物件。否則，promise 將被拒絕。

這個更新的解決方案提供了一種更全面、更可靠的方法來使用 jQuery 確定 div 背景圖像的尺寸。

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