替换具有特定类的图像元素上的lazyload插件的图像属性 [英] Replace image attributes for lazyload plugin on image elements with specific class
问题描述
我正在使用WordPress，我想将延迟加载仅应用于某些图像。我在这里找到了一种创建data-src属性并用正确的图像替换src属性的方法 https://wordpress.stackexchange.com/questions/60792/replace-image-attributes-for-lazyload-plugin-data-src 。现在我的代码将延迟加载应用于所有图像，我只想将它应用于类lazy-load的图像。
I'm using WordPress and I want to apply lazy load to only certain images. I found here a way to create the data-src attributes and replace the src attribute with the correct image https://wordpress.stackexchange.com/questions/60792/replace-image-attributes-for-lazyload-plugin-data-src. Right now my code applies the lazy load to all the images, and I just want to apply it to the images with the class lazy-load.
这是我的代码看起来
// 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');
如何逐个获取元素而不是使用标记？
how can I get the element by class instead of using tag?
推荐答案
您可以使用 xpath （使用 domxpath ）为此; xpath是一种从XML / HTML文档中选择节点的查询语言。
You can use xpath (with domxpath) for this; xpath is a query language to select nodes from XML/HTML documents.
不幸的是，选择具有独立短语类的元素 lazy-load ，对xpath有点复杂;它并不像你可能习惯的那样简洁 CSS选择器; xpath没有简写属性选择器，如 @ attr〜=lazy-load等。
Unfortunately, selecting elements which have a class that is the stand-alone phrase lazy-load, is a bit convoluted with xpath; it's not as concise as you may perhaps be accustomed to with css-selectors; xpath doesn't have shorthand attribute selectors like @attr~="lazy-load", etc.
这里是如何选择所有< img> 元素的示例，其中包含类 lazy-load ：
Here's an example of how you would select all <img> elements that have the class 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）虽然没有正式记录在任何地方（据我所知）， DOMXPath 返回的 DOMNodeList 不是实时，如我认为，与 DOMDocument 返回的 DOMNodeList 相反。因此，您的第一个 foreach（）应该是不必要的。但是你必须尝试一下，确定。
1) Although not officially documented anywhere (as far as I'm aware), the DOMNodeList returned by DOMXPath is not "live", as opposed to DOMNodeLists returned by DOMDocument, I believe. So, your first foreach() should be unnecessary. But you'd have to give it a try, to be sure.
我建议不要做以下任何事情，但如果你确定只有那些< img> 元素才会有 lazy-load ，即 class 属性总是完全 lazy-load ，没有任何空格和/或其他类，你也可以使用这个更简单的查询代替：
I would advice against doing any of the following, but if you are sure the only class those <img> elements will ever have is lazy-load, i.e. the class attribute will always exactly be lazy-load, without any spaces and/or other classes, you could also use this, much simpler, query instead:
$images = $xpath->query( '//img[@class="lazy-load"]' );
或者，如果< img> 元素可以有多个类，但永远不会有任何其他包含短语 lazy-load 的类（如 class =thumbnail lazy-loading，例如）你可以使用：
or, if the <img> elements can have multiple classes, but will never have any other classes that contain the phrase lazy-load (like class="thumbnail lazy-loading", for instance) you could use:
$images = $xpath->query( '//img[contains(@class,"lazy-load")]' );
这篇关于替换具有特定类的图像元素上的lazyload插件的图像属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
