We recently experienced an issue with a carousel using the new Loop Carousel widget from Elementor:
Everything was good with the first slide. The text and image was displaying correctly. But once you clicked on the Next button, the carousel transitioned to the next slide, and only the text of the second slide was visible for a second, and a second or two seconds later, the image finally appeared.
This was happening because the images on the slider had the loading=”lazy” attribute. Recent versions of WordPress add this to all images by default. In order to remove the lazy loading from the images, there’s a simple WordPress hook that you can use ( add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ ); ) but that would disable the lazy loading from all images in the whole site… and that would impact the site performance.
But don’t worry, here’s how you can disable the lazy loading of the carousel images specifically:
Step 1: Set the widget instance ID #
The first thing that you need to do is to give the widget instance an ID. This can be done on the Advanced tab of the Elementor Editor. For this tutorial, we will name it “home-carousel”.
Step 2: Add code to your functions.php #
Next, you need to add the following code to your functions.php file.
Replace the home-carousel part with the ID that you set for the widget instance (in case you used a different ID).
/**
* Disable Lazy Load on Loop Carousel
*
* This will prevent the loop carousel to have unloaded images (empty spaces) when you click on next.
*/
global $logging_ids;
$logging_ids = false;
add_action( 'elementor/frontend/widget/before_render', function( $element ) {
global $logging_ids;
if ( $logging_ids && 'theme-post-featured-image' == $element->get_name() ) {
global $carousel_images;
$carousel_images[] = get_post_thumbnail_id();
}
if ( 'home-carousel' == $element->get_settings( '_element_id' ) ) {
$logging_ids = true;
}
} );
add_action( 'elementor/frontend/widget/after_render', function( $element ) {
if ( 'home-carousel' == $element->get_settings( '_element_id' ) ) {
global $logging_ids;
$logging_ids = false;
}
} );
global $carousel_images;
$carousel_images = array();
add_filter( 'wp_content_img_tag', function( $filtered_image, $context, $attachment_id ) {
global $carousel_images;
if ( in_array( $attachment_id, $carousel_images ) ) {
$filtered_image = str_replace( 'loading="lazy"', '', $filtered_image );
}
return $filtered_image;
}, 10, 3 );
And that’s it! The images on your carousel will load as soon as the page is loaded, and won’t start to load until the slide is visible.
Note that if an image from the carousel is visible on any other part of the page, that will be loaded immediately too (because it’s the same image).
