0

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

延迟加载插件需要data-original属性中的 img url。

我正在img使用函数更改元素，以将图像 url 添加到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元素？srcimg

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

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

1 回答 1

0

对的，这是可能的。如此处所述，您只需要<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');
于 2013-08-27T14:33:01.590 回答