Я использую WordPress, и я хочу применить ленивую нагрузку только к определенным изображениям. Я нашел здесь способ создания атрибутов data-src и заменить атрибут src на правильное изображение https://wordpress.stackexchange.com/questions/60792/replace-image-attributes-for-lazyload-plugin-data-src , Прямо сейчас мой код применяет ленивую загрузку ко всем изображениям, и я просто хочу применить их к изображениям с ленивой загрузкой класса.
Вот как выглядит мой код
// Lazyload Converter function add_lazyload($content) { $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8"); $dom = new DOMDocument(); @$dom->loadHTML($content); $images = []; foreach ($dom->getElementsByTagName('img') as $node) { $images[] = $node; } foreach ($images as $node) { $fallback = $node->cloneNode(true); $oldsrc = $node->getAttribute('src'); $node->setAttribute('data-src', $oldsrc ); $newsrc = get_template_directory_uri() . '/assets/placeholders/squares.svg'; $node->setAttribute('src', $newsrc); $oldsrcset = $node->getAttribute('srcset'); $node->setAttribute('data-srcset', $oldsrcset ); $newsrcset = ''; $node->setAttribute('srcset', $newsrcset); $noscript = $dom->createElement('noscript', ''); $node->parentNode->insertBefore($noscript, $node); $noscript->appendChild($fallback); } $newHtml = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML())); return $newHtml; } add_filter('the_content', 'add_lazyload'); add_filter('post_thumbnail_html', 'add_lazyload'); как я могу получить элемент по классу вместо использования тега?
Для этого вы можете использовать xpath (с domxpath ); xpath – это язык запросов для выбора узлов из документов XML / HTML.
К сожалению, выбор элементов, которые имеют класс, который является автономной фразой lazy-load , немного запутан с помощью xpath; это не так лаконично, как вы, возможно, привыкли к css-селекторам ; xpath не имеет сокращенных селекторов атрибутов, таких как @attr~="lazy-load" и т. д.
Вот пример того, как вы выберете все элементы <img> которые имеют класс lazy-load :
// create a DOMXPath instance that operates on your DOMDocument instance $dom $xpath = new DOMXPath( $dom ); // select nodes by some criteria (returns a non-live¹ DOMNodeList) $images = $xpath->query( '//img[contains(concat(" ", normalize-space(@class), " "), " lazy-load ")]' ); // then apply the same operations to the nodes again as in your last foreach loop foreach ($images as $node) { $fallback = $node->cloneNode(true); // etc. }
1) Хотя я официально не документирован (насколько мне известно), DOMNodeList возвращенный DOMXPath , не является «живым», в отличие от DOMNodeList возвращенного DOMDocument , я считаю. Итак, ваш первый foreach() должен быть лишним. Конечно, вам придется попробовать.
Я бы посоветовал сделать что-то из следующего, но если вы уверены, что единственный класс, который эти элементы <img> когда-либо будут иметь, – это lazy-load , то есть атрибут class всегда будет точно lazy-load , без каких-либо пробелов и / или других классы, вы могли бы также использовать этот, гораздо более простой, запрос:
$images = $xpath->query( '//img[@class="lazy-load"]' );
или, если элементы <img> могут иметь несколько классов, но никогда не будут иметь других классов, которые содержат фразу lazy-load (например, class="thumbnail lazy-loading" lazy-load class="thumbnail lazy-loading" , например), вы можете использовать:
$images = $xpath->query( '//img[contains(@class,"lazy-load")]' );