Создание HTML-элементов с php

Question

У меня есть сайт с тяжелым изображением на WordPress. Чтобы помочь с загрузкой, я использую ленивую загрузку.

Плагин lazyload требует URL-адреса img в атрибуте data-original.

Я изменение 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'); 

lazyloading работает, но я хотел бы добавить запасной вариант без 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');