如何从背景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);
                 });                }
        });
    });