How do I get multiple image URLs from background CSS attribute?

Question

I have made a small plugin which checks to see if a element(s) background image has loaded.

In doing this I needed to extract the URL of the background image, I have managed to do it when there is just one background image:

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

However I want to make my plugin support elements with multiple background images

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

It would be good if it worked for any css format e.g. both:

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

and

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

Ideally the result would be an array of the urls (e.g. 0 => ['sheep.png'], 1 =>['betweengrassandsky.png'])

Thanks in advance guys.

You don't mean multiple background images on the same element, do you? — artm
– artm, Commented Oct 30, 2014 at 10:17
You could split the property on , and run your regex on each in the array. — artm
– artm, Commented Oct 30, 2014 at 13:35
I wasn't sure if you were asking for a solution for multiple background images on the same element, or display only one load time for all 3 background images. But yeah, split should work. Good luck. — artm
– artm, Commented Oct 30, 2014 at 15:06

Jon Catmull · Accepted Answer · 2014-10-30 16:26:40Z

2

Thanks to artm for his idea.

I split the background image by ", " and then run a foreach loop over the array running my existing replace methods.

This is essentially what I did:

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

Here is a working code pen:

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

You can download the plugin that detects page load from here as well

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

edited Oct 30, 2014 at 16:26

answered Oct 30, 2014 at 16:20

Jon Catmull

12.9k5 gold badges21 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hristo · Accepted Answer · 2014-10-31 13:56:14Z

Obviously you came to the same idea before I can submit, but anyway, I have already written the code... :) Actually, if you use "url" for your split function, you don't have to check if the background has one url or many - idx will be always at least 0 and 1, and you will need to catch always the entries >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);
                 });                }
        });
    });

Collectives™ on Stack Overflow

How do I get multiple image URLs from background CSS attribute?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related