用php創建HTML元素

Question

我有一個圖像很重的WordPress網站。爲了幫助加載，我使用了延遲加載。

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

我改變使用功能的圖像URL添加到data-original的img元素和佔位符的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元素是否可以使用原始img中的src？

所以新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');