如何從背景CSS屬性獲取多個圖像URL？

Question

我制作了一個小插件，用於檢查是否已加載元素背景圖像。

為此，我需要提取背景圖像的URL，當只有一個背景圖像時，我設法做到了：

var bgURL = $('#myelement').css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');

但是我想使我的插件支持元素具有多個背景圖像

如果有幫助，下面是操作中的代碼示例。

如果它適用於任何css格式，例如兩個都可以，那就太好了：

background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;

和

background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;

理想情況下，結果應為網址數組（例如0 => ['sheep.png']，1 => ['betweengrassandsky.png']）

在此先感謝大家。

Answer 1

感謝artm的想法。

我用“，”分割背景圖像，然后在運行現有替換方法的數組上運行一個foreach循環。

這基本上就是我所做的：

var array = [];
$.each($('#myElement').css('background-image').split(', '), function(key, value){
    array.push(value.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''));
});

這是工作代碼筆：

http://codepen.io/catmull/pen/Hhufw

您也可以從此處下載檢測頁面加載的插件

http://catmull.uk/code-lab/background-image-loaded/

Answer 2

顯然，您在提交之前就已經有了相同的想法，但是無論如何，我已經編寫了代碼... :)實際上，如果您對split函數使用“ url”，則不必檢查背景是否有一個網址或多個網址-idx始終至少為0和1，並且您將需要始終捕獲> 0的條目。

// Loop through elements
    this.each(function(){
        var Obj = $(this);
        $.each( Obj.css('background-image').split("url"), function(idx, value){
            if (idx>0){
                 //The stuff you're doing with the img tag
                 $('<img/>').attr('src', value.replace( /\(["']?/,'' ).replace( /["']?\),?/,'' )).load(function(){
                     $(this).remove(); // prevent memory leaks
                     settings.afterLoaded.call(Obj);
                 });                }
        });
    });