List of All Background Images in DOM

Question

What's the best way to find all of the background images on a given page using javascript?

The ideal end result would be an array of all of the url's.

Answer 1

//alert(getallBgimages())

function getallBgimages(){
 var url, B= [], A= document.getElementsByTagName('*');
 A= B.slice.call(A, 0, A.length);
 while(A.length){
  url= document.deepCss(A.shift(),'background-image');
  if(url) url=/url\(['"]?([^")]+)/.exec(url) || [];
  url= url[1];
  if(url && B.indexOf(url)== -1) B[B.length]= url;
 }
 return B;
}

document.deepCss= function(who, css){
 if(!who || !who.style) return '';
 var sty= css.replace(/\-([a-z])/g, function(a, b){
  return b.toUpperCase();
 });
 if(who.currentStyle){
  return who.style[sty] || who.currentStyle[sty] || '';
 }
 var dv= document.defaultView || window;
 return who.style[sty] || 
 dv.getComputedStyle(who,"").getPropertyValue(css) || '';
}

Array.prototype.indexOf= Array.prototype.indexOf || 
 function(what, index){
 index= index || 0;
 var L= this.length;
 while(index< L){
  if(this[index]=== what) return index;
  ++index;
 }
 return -1;
}

Answer 2

Without using jQuery, you can do:

var elementNames = ["div", "body", "td"] // Put all the tags you want bg images for here
var allBackgroundURLs = new Array();
elementNames.forEach( function(tagName) {
     var tags = document.getElementsByTagName(tagName);
     var numTags = tags.length;
     for (var i = 0; i < numTags; i++) {
         tag = tags[i];
         if (tag.style.background.match("url")) {
             var bg = tag.style.background;
             allBackgroundURLs.push(bg.substr(bg.indexOf("url") + 4, bg.lastIndexOf(")") - (bg.indexOf("url") + 4) ) );
         }
     }
});

Answer 3

One of the way is to look through all document object and get there styles. Then test style.background attribute on "url(" string and if it matches then get path between "url(" and ")" and put it into array. Algorithm for JS. Try to do it yourself. Will find troubles - came with code.

Answer 4

Here's a way to check what background urls there are in the styles on the page (look Ma, no jQuery):

window.npup = (function (doc) {
  var sheets = doc.styleSheets;
  var hash = {}, sheet, rules, rule, url, match;
  // loop the stylesheets
  for (var sheetIdx=0, sheetsLen=sheets.length; sheetIdx<sheetsLen; ++sheetIdx) {
    sheet = sheets[sheetIdx];
    // ie or w3c stylee rules property?
    rules = sheet.rules ? sheet.rules : sheet.cssRules;
    // loop the rules
    for (var ruleIdx=0, rulesLen=rules.length; ruleIdx<rulesLen; ++ruleIdx) {
      rule = rules[ruleIdx];
      if (rule.selectorText && rule.style.cssText) {
        // check if there's a style setting we're interested in..
        if (rule.style.cssText.match(/background/)) {
          // ..and if it has an url in it, put it in the hash
          match = /url\(([^)]*)\)/.exec(rule.style.cssText);
          if (match) {hash[match[1]] = true;}
        }
      }
    }
  }
  // return an array of unique urls
  var urls = [];
  for (url in hash) {urls.push(url);}
  // export a getter for what we found
  return {
    getBackgroundUrls: function () { return urls;}
  };
})(document); // submit reference to the document of interest

With this on the page you can get an array of urls with npup.getBackgroundUrls(); I did some (superfluos?) commenting in the code that explains how it goes about. It doesn't grab inlined styles, but I think that was no problem for you? Styles in external sheets and in <style> tags on the page are scavenged.

The routine is easy to modify if you would like to keep a count, or keep associations to the actual rules that an url was found in etc.

Answer 5

This is a complicated problem. The reason is that the background-image can be applied to the element by using a separate CSS file. This way parsing all the objects in the DOM and checking for their background-image will not work.

One of the ways I can see is to create a simple HttpHandler which will work on all the type of images. When images are referenced inside the CSS file they are downloaded as a separate entity. This means HttpHandler will be able to capture the type of the image and then execute on it.

Maybe a server side solution is the best way to go on this one!

Answer 6

I needed this function, but they were all too heavy unfortunately. So thinking about it, here is my solution, if it can help.

function getAllBgInHtml()
{
    return document.body.innerHTML.match(/background-image.+?\((.+?)\)/gi).map(function(e){ return ((e.match(/background-image.+?\((.+?)\)/i) || [])[1] || '').replace(/"|"/g,'') });
}

Does not work for background image in external stylesheet.