Seleccione rápidamente todos los elementos con la imagen de fondo css

Question

Quiero capturar todos los elementos en una página que tenga una imagen de fondo css. Puedo hacer esto a través de una función de filtro, pero es muy lento en una página con muchos elementos:

$('*').filter(function() { 
    return ($(this).css('background-image') !== ''); 
}).addClass('bg_found'); 

¿Hay alguna forma más rápida para seleccionar elementos con imágenes de fondo?

Answer 1

Si hay alguna etiqueta que sepa que no tendrá una imagen de fondo, puede mejorar la selección excluyendo aquellas con el not-selector^(docs).

$('*:not(span,p)') 

Además de eso, podría intentar utilizar un enfoque API más nativo en el filtro.

$('*').filter(function() { 
    if (this.currentStyle) 
       return this.currentStyle['backgroundImage'] !== 'none'; 
    else if (window.getComputedStyle) 
       return document.defaultView.getComputedStyle(this,null) 
          .getPropertyValue('background-image') !== 'none'; 
}).addClass('bg_found'); 

Ejemplo:http://jsfiddle.net/q63eU/

El código en el filtro se basa en el código getStyle de: http://www.quirksmode.org/dom/getstyles.html

---

publicación de una versión for declaración para evitar la función de llamadas en .filter() .

var tags = document.getElementsByTagName('*'), 
    el; 

for (var i = 0, len = tags.length; i < len; i++) { 
    el = tags[i]; 
    if (el.currentStyle) { 
     if(el.currentStyle['backgroundImage'] !== 'none') 
      el.className += ' bg_found'; 
    } 
    else if (window.getComputedStyle) { 
     if(document.defaultView.getComputedStyle(el, null).getPropertyValue('background-image') !== 'none') 
      el.className += ' bg_found'; 
    } 
}