如何从后台CSS属性获取多个图片网址？

我已经做了一个小插件，检查是否加载了元素背景图片。如何从后台CSS属性获取多个图片网址？

在做这个，我需要提取的背景图像的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 => [ 'sheep.png']，1 => [ 'betweengrassandsky.png'] ）

在此先感谢你们。

来源

2014-10-30 Jon Catmull

你不是指同一个元素上有多个背景图片吗？ – artm 2014-10-30 10:17:24

不，我的意思是相同的元素 – 2014-10-30 12:34:12

你可以在'，'上分割属性，并在数组中的每一个上运行你的正则表达式。 – artm 2014-10-30 13:35:38

很明显，在我提交之前，你可能会遇到同样的想法，但无论如何，我已经编写了代码...... :)其实，如果你使用“url”作为你的分割函数，你不必检查背景有一个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); 
       });    } 
     }); 
    });

来源

2014-10-30 16:41:08 Hristo

非常好的一点:) – 2014-10-31 15:22:48

感谢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/

来源

2014-10-30 16:20:50

如何从后台CSS属性获取多个图片网址？

回答

相关问题