Elementor image widget loading strategy control

elementor-image-widget-loading.php

<?php

/**
 * Add a control to the Elementor Image Widget to explicitly adjust the loading strategy.
 *
 * @param \Elementor\Widget_Image $element
 *
 * @return void
 */
function sitecare_elementor_image_widget_loading_control( \Elementor\Widget_Image $element ): void {

	$element->start_injection( array(
		'at' => 'after',
		'of' => 'link',
	) );

	$element->add_control( 'loading_strategy', array(
		'label' => __( 'Loading Strategy', 'o365' ),
		'type' => \Elementor\Controls_Manager::SELECT,
		'default' => 'default',
		'options' => array(
			'default' => __( 'Default', 'o365' ),
			'lazy' => __( 'Lazy', 'o365' ),
			'eager' => __( 'Eager', 'o365' ),
		),
	) );

	$element->add_control( 'fetch_priority', array(
		'label' => __( 'Fetch Priority', 'o365' ),
		'type' => \Elementor\Controls_Manager::SELECT,
		'default' => 'default',
		'options' => array(
			'default' => __( 'Default', 'o365' ),
			'auto' => __( 'Auto', 'o365' ),
			'high' => __( 'High', 'o365' ),
			'low' => __( 'Low', 'o365' ),
		),
	) );

	$element->add_control( 'decoding_strategy', array(
		'label' => __( 'Decoding Priority', 'o365' ),
		'type' => \Elementor\Controls_Manager::SELECT,
		'default' => 'default',
		'options' => array(
			'default' => __( 'Default', 'o365' ),
			'auto' => __( 'Auto', 'o365' ),
			'sync' => __( 'Sync', 'o365' ),
			'async' => __( 'Async', 'o365' ),
		),
	) );

	$element->end_injection();
}
add_action( 'elementor/element/image/section_image/before_section_end', 'sitecare_elementor_image_widget_loading_control' );

/**
 * Apply the explicitly-set loading strategy on the Elementor Image Widget.
 *
 * @param string $content
 * @param \Elementor\Widget_Base $widget
 *
 * @return string
 */
function sitecare_elementor_image_widget_loading_attribute( string $content, \Elementor\Widget_Base $widget ): string {

	if ( $widget instanceof \Elementor\Widget_Image ) {

		$widget_settings = $widget->get_settings();

		/*
		 * Remove any attributes added to the element before this filter.
		 */
		$content = preg_replace( '/\s+loading=[\'"][^\'"]*[\'"]/m', '', $content );
		$content = preg_replace( '/\s+fetchpriority=[\'"][^\'"]*[\'"]/m', '', $content );
		$content = preg_replace( '/\s+decoding=[\'"][^\'"]*[\'"]/m', '', $content );

		$settings = array(
			'loading' => $widget_settings['loading_strategy'] ?? 'default',
			'fetchpriority' => $widget_settings['fetch_priority'] ?? 'default',
			'decoding' => $widget_settings['decoding_strategy'] ?? 'default',
		);

		$attributes = array(
			'loading' => array( 'lazy', 'eager' ),
			'fetchpriority' => array( 'auto', 'high', 'low' ),
			'decoding' => array( 'auto', 'sync', 'async' ),
		);

		foreach ( $attributes as $attribute_name => $available_options ) {

			$attribute_value = $settings[ $attribute_name ] ?? null;

			if ( in_array( $attribute_value, $available_options ) ) {

				$search = '<img';
				$replace = sprintf( '<img %s="%s"', $attribute_name, $attribute_value );

				$content = str_replace( $search, $replace, $content );
			}
		}
	}

	return $content;
}
add_filter( 'elementor/widget/render_content', 'sitecare_elementor_image_widget_loading_attribute', 10, 2 );