LazyLoad HTML Проверка пустого srcset - PullRequest
Новая
       14

LazyLoad HTML Проверка пустого srcset

0 голосов
/ 12 февраля 2020

Я использую эту функцию для преобразования моих изображений WordPress в формат LazyLoad: 

// Lazyload Converter
function add_lazyload($content) {

    $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    $dom = new DOMDocument();
    @$dom->loadHTML($content);

    // Convert Images
    $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 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
    $node->setAttribute('src', $newsrc);

    $oldsrcset = $node->getAttribute('srcset');
    $node->setAttribute('data-srcset', $oldsrcset );
    $newsrcset = '';
    $node->setAttribute('srcset', $newsrcset);

    $classes = $node->getAttribute('class');
    $newclasses = $classes . ' lazy';
    $node->setAttribute('class', $newclasses);

    $noscript = $dom->createElement('noscript', '');
    $node->parentNode->insertBefore($noscript, $node);
    $noscript->appendChild($fallback);
 }

    // Convert Videos
    $videos = [];

    foreach ($dom->getElementsByTagName('iframe') as $node) {
        $videos[] = $node;
    }

    foreach ($videos as $node) {  
        $fallback = $node->cloneNode(true);

        $oldsrc = $node->getAttribute('src');
        $node->setAttribute('data-src', $oldsrc );
        $newsrc = '';
        $node->setAttribute('src', $newsrc);

        $classes = $node->getAttribute('class');
        $newclasses = $classes . ' lazy';
        $node->setAttribute('class', $newclasses);

        $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');

Вывод изображения выглядит следующим образом: 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" class="wp-image-7035 lazy" srcset="" sizes="(max-width: 720px) 100vw, 720px" data-src="http://localhost/wp-content/uploads/2020/01/unsplash-1.jpg" data-srcset="http://localhost/wp-content/uploads/2020/01/unsplash-1.jpg 720w, http://localhost/wp-content/uploads/2020/01/unsplash-1-300x300.jpg 300w, http://localhost/wp-content/uploads/2020/01/unsplash-1-150x150.jpg 150w">

Проблема: проверка html не выполнена из-за пустого атрибута srcset. Как я могу это исправить?

Я думаю, мне нужно что-то вроде: 

if ( $img->hasAttribute( 'sizes' ) && $img->hasAttribute( 'srcset' ) ) {

, но я не знаю, как это реализовать, потому что мои знания php очень ограничены .

Заранее спасибо!

...