Author: Joseph Dickson

Joseph Dickson is a front-end web developer with experience building higher education websites using ClassicPress, WordPress, and Drupal.

Disable Lazy Loading Images Using the_post_thumbnail() in WordPress

The introduction of lazy-loading of images as of WordPress 5.5 improves site performance by delaying them until the user scrolls into view making our pages feel faster by only loading images as we need to see them.

The Problem

However, I needed a way to disable lazy loading for specific features like this image carousel where the last few slides would not load as they rotated into view. 🙁

Image not loading on reveal in a carousel
A blank space where an image should appear. Lazy Loading somehow prevented the image from displaying on first pass while using Foundation 6’s Orbit Carousel.

The Solution

Disable lazy loading of the carousel images using this template part.

the_post_thumbnail( 'carousel', [ 'class' => 'orbit-image' , 'loading' => false ] );

The code above is inspired by modifying the attr argument using an array.

Adding ‘loading’ => false to the array disables the feature for this homepage image carousel.

The Orbit carousel now loads all images at page load.

Before and After

loading=”lazy” appears within the image HTML tag.

loading=”lazy” no longer displays with the image.

code sample using WP_query

Disabling lazy loading for a specific use of the_post_thumbnail() allows us to benefit from the feature everywhere else. 😀