Быстрое выделение всех элементов с помощью css background image

Я хочу захватить все элементы на странице, которая имеет css-фоновое изображение. Я могу сделать это с помощью функции фильтрации, но он очень медленный на странице со многими элементами:

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

Есть ли более быстрый способ выбора элементов с фоновыми изображениями?

Ответ 1

Если есть теги, которые, как вы знаете, не будут иметь фоновое изображение, вы можете улучшить выделение, исключая те, у которых not-selector ^{< я > (документы)}.

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

Кроме того, вы можете попробовать использовать более собственный API-подход в фильтре.

$('*').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');

Пример: http://jsfiddle.net/q63eU/

Код в фильтре основан на коде getStyle: http://www.quirksmode.org/dom/getstyles.html

Проводка версии оператора for, чтобы избежать вызовов функций в .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';
    }
}