这里有一个解决方案,它只对具有.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;
}