javascript - 如何从背景 CSS 属性获取多个图像 URL？

Question

我制作了一个小插件，用于检查元素背景图像是否已加载。

在执行此操作时，我需要提取背景图片的 URL，当只有一张背景图片时，我已经设法做到了:

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

但是我想让我的插件支持具有多个背景图像的元素

Here is a code pen example of the code in action if it helps.

如果它适用于任何 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;

理想情况下，结果将是一个 url 数组(例如 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/