Hello
I am trying to disable lazy load on a logo image I have set in my header (created with Cornerstone), as it is considered an “above-the-fold” image. The website in question is https://stagetcg.wpengine.com/
I am using the “Code Snippets” plugin to do this, image ID is 291, and I have tried several methods (listed below), of which none is working:
METHOD 01
/* Disable lazy loading for single image* */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( ‘the_content’ === $context ) {
$image_url = wp_get_attachment_image_url( 291, ‘large’ );
if ( false !== strpos( $image, ’ src="’ . $image_url . ‘"’ )) {
return false;
}
}
return $value;
}
add_filter( ‘wp_img_tag_add_loading_attr’, ‘wphelp_no_lazy_load_id’, 291, 291 );
METHOD 02
echo wp_get_attachment_image( $image, $size, false, [
‘class’ => ‘skip-lazy’,
‘loading’ => ‘eager’
] );
METHOD 03
/* Remove lazy load first image */
function add_responsive_class($content){
if ( is_single() || is_page() || is_front_page() || is_home() ) {
$content = mb_convert_encoding($content, ‘HTML-ENTITIES’, “UTF-8”);
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName(‘img’);
$img = $imgs[0];
if ($imgs[0] == 1) { // Check first if it is the first image
$img->removeAttribute( ‘loading’ );
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter (‘the_content’, ‘add_responsive_class’);
The only thing which seems to be working is disabling lazy load on the whole site:
/* Disable native lazy loading WP */
add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );
Can you please tell me which method is used to pull images to the header created with Cornerstone (wp_get_attachment_image_url, or something else), as I would really like to resolve this? Any help is appreciated. Thank you very much.