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;

理想情况下，结果将是一个网址数组（例如0 =＆gt; [＆＃39; sheep.png＆＃39;]，1 =＆gt; [＆＃39; betweengrassandsky.png＆＃39;]）< / p>

先谢谢你们。

Answer 1

感谢artm的想法。

我将背景图片拆分为＆＃34;，＆＃34;然后在运行现有替换方法的数组上运行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

显然你在我提交之前就提出了相同的想法，但无论如何，我已经编写了代码...... :)实际上，如果你使用＆＃34; url＆＃34;对于你的分割功能，你不必检查背景是否有一个url或多个 - idx将始终至少为0和1，你需要始终捕获条目＆gt; 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);
                 });                }
        });
    });

如何从后台CSS属性获取多个图像URL？

2 个答案: