Before and After Image Module images are not loading correctly

LazyLoad have compatibility issue with most plugin out there especially when:

•Grid layouts that use fixed positioning/fixed widths

•e.g. some implementations of Isotope or Masonry

•JavaScripxs that try to calculate spaces based on image size

•Internet Explorer

•LazyLoad is not supported for IE8 and below

•Certain background images

•Depending on how they are added, not all background images can be LazyLoaded.

If you're using WP Rocket plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php

function dsm_rocket_lazyload_exclude_class( $attributes ) {
		$attributes[] = 'class="dsm-before-after-image-slider-before"';
		$attributes[] = 'class="dsm-before-after-image-slider-after"';

		return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'dsm_rocket_lazyload_exclude_class' );

If you're using JetPack plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php

function dsm_exclude_image_class_from_lazy_load( $classes ) {
    $classes[] = 'dsm-before-after-image-slider-before';
    $classes[] = 'dsm-before-after-image-slider-after';
    return $classes;
}
add_filter( 'jetpack_lazy_images_blacklisted_classes', 'dsm_exclude_image_class_from_lazy_load', 999, 1 );