用特定类替换图像元素上lazyload插件的图像属性
我正在使用WordPress，我只想对某些图像应用延迟加载。我在这里找到了一种创建数据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');
如何通过类而不是使用标签来获取元素？
共有1个答案
您可以为此使用xpath（与domxpath一起）；xpath是一种从XML/HTML文档中选择节点的查询语言。
不幸的是，选择具有独立短语lazy load的类的元素有点与xpath有关；它并不像你可能习惯的css选择器那样简洁；xpath没有像@attr~=“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不是"live"，而不是由DOM文档返回的DOMNodeList，我相信。因此，您的第一个Foreach（）应该是不必要的。但是你必须试一试，才能确定。
我建议不要做以下任何一项，但如果您确定唯一的类是
$images = $xpath->query( '//img[@class="lazy-load"]' );
或者，如果
$images = $xpath->query( '//img[contains(@class,"lazy-load")]' );
-
> 我有一张NxM大小的原始图像(FigureB-它是原始图像的蓝色香奈儿），从这张图像中我选择一个特定的区域来研究(NewfigureB)，大小120x170； 然后我将这个区域划分为我所说的宏像素，即10x10的数据点（像素）阵列； 我然后在所选区域上涂上掩膜，只选择符合一定发光条件的点； 到目前为止，这是我想出来的。如有任何帮助，将不胜感激。 多谢
-
顺便说一句，我使用的是Python 3.8、Chrome 81.0.4044.122和Selenium的最新版本。 到目前为止，我使用:
-
顺便说一句，我使用Python 3.8、Chrome 81.0.4044.122和最新版本的Selenium。 到目前为止，我使用:单击button，然后找到一个具有图像而不是文本的登录按钮。我尝试了XPath、CSS选择器、id、名称、文本链接、ActionChains(move_to)什么都不起作用。 下面是HTML：请点击我。 如何找到图像按钮的正确XPath并单击它？ driver.fin
-
问题内容： 我想替换图像的颜色。例如，将所有蓝色变为红色而形状没有任何变形。当我尝试这样做时，我可以通过迭代每个像素来交换颜色，但是交换区域的形状变为平坦的形状。 example1输入：http: //www.tutorialwiz.com/tutorials/changing_color/images/original.jpg example1输出：http : //www.tutorialwi
-
问题内容： 我有一个包含一堆图像的网页。有时，该图像不可用，因此在客户端的浏览器中会显示损坏的图像。 如何使用jQuery获取图像集，将其过滤为损坏的图像，然后替换src？ -我以为使用jQuery会更容易，但是事实证明，仅使用纯JavaScript解决方案（即Prestaul提供的解决方案）要容易得多。 问题答案： 处理事件以使用JavaScript重新分配图像源： 或没有JavaScript函
-
如何替换PDF中的图像与另一个图像PDF框。怎么做？ 我想用另一个图像更改pdf上的VisualSignature。