Question

我有一个图片密集的WordPress网站。为了帮助加载，我正在使用延迟加载。

lazyload插件需要data-original属性中的img url。

我正在使用函数更改img元素，将图片网址添加到data-original，将占位符添加到src：

function add_lazyload($content) {
     $dom = new DOMDocument();
     @$dom->loadHTML($content);

     foreach ($dom->getElementsByTagName('img') as $node) {
         $oldsrc = $node->getAttribute('src');
         $node->setAttribute("data-original", $oldsrc );
         $newsrc = ''.get_template_directory_uri().'/library/images/nothing.gif';
         $node->setAttribute("src", $newsrc);
         //create img tag
                 $element = $dom->createElement("img");
                 $dom->appendChild($element);

     }
     $newHtml = $dom->saveHtml();
     return $newHtml;
}

add_filter('the_content', 'add_lazyload');

延迟加载正在运行，但我想添加一个非JavaScript回退。使用上述函数是否可以使用原始img中的src创建新的img元素？

所以新的img元素看起来像这样：

<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

Answer 1

是的，有可能。如上所述here，您只需在图片后附加<noscript>部分即可。

您的代码将如下所示：

function add_lazyload($content) {
     $dom = new DOMDocument();
     @$dom->loadHTML($content);

     foreach ($dom->getElementsByTagName('img') as $node) {
         $oldsrc = $node->getAttribute('src');
         $node->setAttribute("data-original", $oldsrc );
         $newsrc = ''.get_template_directory_uri().'/library/images/nothing.gif';
         $node->setAttribute("src", $newsrc);
         //create img tag
         $element = $dom->createElement("img");
         $dom->appendChild($element);
         // add the <noscript> fallback for this image
         $dom->appendChild('<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>');

     }
     $newHtml = $dom->saveHtml();
     return $newHtml;
}

add_filter('the_content', 'add_lazyload');

用php创建HTML元素

1 个答案: