用特定类替换图像元素上的延迟加载插件的图像属性

时间:2017-06-03 作者:alejuu

我只想对某些图像应用延迟加载。我发现这里(Replace image attributes for lazyload plugin (data-src) ) 创建数据src属性并用正确图像替换src属性的方法。现在,我的代码将延迟加载应用于所有图像,我只想将其应用于具有延迟加载类的图像。

这就是我的代码现在的样子

// Lazyload Converter
function add_lazyload($content) {

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

$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 = get_template_directory_uri() . \'/assets/placeholders/squares.svg\';
    $node->setAttribute(\'src\', $newsrc);

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

    $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\');
如何通过类而不是使用标记获取元素?

1 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

这里有一个解决方案,它只对具有.lazy-load 班我加载HTML的方式有点不同,但这种方法在过去对我来说是可靠的。HTML的处理与原始代码中的处理相同。针对特定类别的图像的技巧如下:

// Match elements with the lazy-load class (note space around class name)
// See http://stackoverflow.com/a/26126336/3059883
$lazy_load_images = $xpath->query( "//img[ contains( concat( \' \', normalize-space( @class ), \' \'), \' lazy-load \' ) ]" );
完整代码:

/**
 * Lazyload Converter - Sets up images for  lazy loading:
 *  - Affects only images with the .lazy-load class.
 *  - Assigns original src value to data-src attribute
 *  - Replaces original src value with a placeholder image
 *  - Assigns original srcset value to data-srcset
 *  - Replaces original srcset value to empty string
 *  - Creates noscript tag containing fallback HTML
 * 
 * @param string $content
 * @return string
 */
add_filter( \'the_content\', \'wpse_add_lazyload\' );
add_filter( \'post_thumbnail_html\', \'wpse_add_lazyload\' ); 
function wpse_add_lazyload( $content ) {
    $placeholder = get_template_directory_uri() . \'/assets/placeholders/squares.svg\';

    // Create an instance of DOMDocument.
    $dom = new \\DOMDocument();

    // Supress errors due to malformed HTML.
    // See http://stackoverflow.com/a/17559716/3059883
    $libxml_previous_state = libxml_use_internal_errors( true );

    // Populate $dom with $content, making sure to handle UTF-8, otherwise
    // problems will occur with UTF-8 characters.
    // Also, make sure that the doctype and HTML tags are not added to our HTML fragment. http://stackoverflow.com/a/22490902/3059883
    $dom->loadHTML( mb_convert_encoding( $content, \'HTML-ENTITIES\', \'UTF-8\' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

    // Restore previous state of libxml_use_internal_errors() now that we\'re done.
    libxml_use_internal_errors( $libxml_previous_state );

    // Create an instance of DOMXpath.
    $xpath = new \\DOMXpath( $dom );

    // Match elements with the lazy-load class (note space around class name)
    // See http://stackoverflow.com/a/26126336/3059883
    $lazy_load_images = $xpath->query( "//img[ contains( concat( \' \', normalize-space( @class ), \' \'), \' lazy-load \' ) ]" );

    // Process image HTML
    foreach ( $lazy_load_images as $node ) {
        $fallback = $node->cloneNode( true );

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

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

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

    // Save and return updated HTML.
    $new_content = $dom->saveHTML(); 
    return  $new_content;
}

结束

相关推荐

使用Functions.php的出列脚本

您好,我正在尝试将在我的队列中找到的脚本“jquery.favorite.js”退出队列。php:// WP_ENQUEUE_SCRIPTS static function wp_enqueue_scripts_callback() { global $javo_tso; $javo_register_scripts = Array( \'oms.min.js\'