Javascript 用特定类替换图像元素上lazyload插件的图像属性_Javascript_Php_Image_Dom_Xpath_Domxpath_Css Selectors

Javascript 用特定类替换图像元素上lazyload插件的图像属性

javascript php image dom xpath

Javascript 用特定类替换图像元素上lazyload插件的图像属性,javascript,php,image,dom,xpath,domxpath,css-selectors,Javascript,Php,Image,Dom,Xpath,Domxpath,Css Selectors,我正在使用WordPress，我只想对某些图像应用延迟加载。我在这里找到了一种创建数据src属性并用正确的图像替换src属性的方法。现在，我的代码将延迟加载应用于所有图像，我只想将其应用于具有延迟加载类的图像这就是我的代码的外观 // Lazyload Converter function add_lazyload($content) { $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8"); $dom = ne

我正在使用WordPress，我只想对某些图像应用延迟加载。我在这里找到了一种创建数据src属性并用正确的图像替换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');

//Lazyload转换器
函数add_lazyload（$content）{
$content=mb_convert_编码（$content，'HTML-ENTITIES'，“UTF-8”）；
$dom=新的DOMDocument（）；
@$dom->loadHTML（$content）；
$images=[]；
foreach（$dom->getElementsByTagName（'img'）作为$node）{
$images[]=$node；
}
foreach（$图像作为$node）{
$fallback=$node->cloneNode（真）；
$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（'/^/'，''，str_replace（数组（''，''，''），数组（''，''，''），$dom->saveHTML（））；
返回$newHtml；
}
添加过滤器（“内容”，“添加懒散负载”）；
添加过滤器（'post_缩略图\u html'，'add_lazyload'）；

如何通过类而不是使用标记来获取元素？

您可以使用（with）进行此操作；xpath是一种从XML/HTML文档中选择节点的查询语言

不幸的是，选择具有独立短语

lazy load

的类的元素有点与xpath有关；它并不像你可能习惯的那样简洁；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
不是“活的”，我相信与DOMDocument
返回的DOMNodeList
相反。因此，您的第一个foreach（）
应该是不必要的。但你肯定得试试看
我建议不要执行以下任何操作，但如果您确定这些
元素将拥有的唯一类是延迟加载
，即类
属性将始终是延迟加载
，没有任何空格和/或其他类，您也可以使用更简单的查询：
$images = $xpath->query( '//img[@class="lazy-load"]' );

或者，如果
元素可以有多个类，但永远不会有任何其他类包含短语惰性加载
（例如class=“缩略图惰性加载”
），则可以使用：
$images = $xpath->query( '//img[contains(@class,"lazy-load")]' );