← All changes | modules/lazyload/module.php +36 -48 3.9.2 → 3.10.0-dev1 View file →

		@@ -23,13 +23,23 @@
23	23	'name' => static::EXPERIMENT_NAME,
24	24	'title' => esc_html__( 'Lazy Load Background Images', 'elementor' ),
25	25	'tag' => esc_html__( 'Performance', 'elementor' ),
26	26	'description' => esc_html__( 'Lazy loading images that are not in the viewport improves initial page load performance and user experience. By activating this experiment all background images except the first one on your page will be lazy loaded to improve your LCP score', 'elementor' ),
27		- 'release_status' => Experiments_Manager::RELEASE_STATUS_ALPHA,
	27	+ 'release_status' => Experiments_Manager::RELEASE_STATUS_BETA,
28	28	'default' => Experiments_Manager::STATE_INACTIVE,
29	29	];
30	30	}
31	31
	32	+ private function enqueue_scripts() {
	33	+ wp_enqueue_script(
	34	+ 'elementor-lazyload',
	35	+ $this->get_js_assets_url( 'lazyload' ),
	36	+ [ 'elementor-frontend' ],
	37	+ ELEMENTOR_VERSION,
	38	+ true
	39	+ );
	40	+ }
	41	+
32	42	private function enqueue_styles() {
33	43	wp_enqueue_style(
34	44	'elementor-lazyload',
35	45	$this->get_css_assets_url( 'modules/lazyload/frontend' ),
		@@ -40,9 +50,9 @@
40	50
41	51	private function update_element_attributes( Element_Base $element ) {
42	52	$settings = $element->get_settings_for_display();
43	53	$controls = $element->get_controls();
44		- $lazyload_attribute_name = 'data-e-bg-lazyload';
	54	+ $keys = null;
45	55
46	56	$controls_with_background_image = array_filter( $controls, function( $control ) {
47	57	return Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] );
48	58	} );
		@@ -48,20 +58,33 @@
48	58	} );
49	59
50	60	foreach ( $controls_with_background_image as $control_name => $control_data ) {
51	61	$keys = Utils::get_array_value_by_keys( $control_data, [ 'background_lazyload', 'keys' ] );
	62	+ break;
	63	+ }
	64	+
	65	+ if ( $keys ) {
52	66	$background_image_url = Utils::get_array_value_by_keys( $settings, $keys );
53	67	if ( $background_image_url ) {
	68	+ $bg_selector = Utils::get_array_value_by_keys( $control_data, [ 'background_lazyload', 'selector' ] ) ?? '';
	69	+ $element->add_render_attribute( '_wrapper', [
	70	+ 'data-e-bg-lazyload' => $bg_selector,
	71	+ ] );
	72	+ }
	73	+ }
	74	+ }
54	75
55		- $has_attribute = $element->get_render_attributes( '_wrapper', $lazyload_attribute_name );
56		- if ( ! $has_attribute ) {
57		- $bg_selector = Utils::get_array_value_by_keys( $control_data, [ 'background_lazyload', 'selector' ] ) ?? '';
58		- $element->add_render_attribute( '_wrapper', [
59		- $lazyload_attribute_name => $bg_selector,
60		- ] );
	76	+ private function reduce_background_image_size( $value, $css_property, $matches, $control ) {
	77	+ $is_lazyload_active = Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] );
	78	+ if ( $is_lazyload_active ) {
	79	+ if ( 0 === strpos( $css_property, 'background-image' ) && '{{URL}}' === $matches[0] ) {
	80	+ $thumbnail_image_src = wp_get_attachment_image_src( $value['id'], 'thumbnail' );
	81	+ if ( $thumbnail_image_src ) {
	82	+ $value['url'] = $thumbnail_image_src[0];
61	83	}
62	84	}
63	85	}
	86	+ return $value;
64	87	}
65	88
66	89	private function append_lazyload_selector( $control, $value ) {
67	90	if ( Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] ) ) {
		@@ -67,11 +90,9 @@
67	90	if ( Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] ) ) {
68	91	foreach ( $control['selectors'] as $selector => $css_property ) {
69	92	if ( 0 === strpos( $css_property, 'background-image' ) ) {
70	93	if ( ! empty( $value['url'] ) ) {
71		- $css_property = str_replace( 'url("{{URL}}")', 'var(--e-bg-lazyload-loaded)', $css_property );
72	94	$control['selectors'][ $selector ] = $css_property . '--e-bg-lazyload: url("' . $value['url'] . '");';
73		- $control = $this->apply_dominant_color_background( $control, $value, $selector );
74	95	}
75	96	}
76	97	}
77	98	}
		@@ -77,29 +98,19 @@
77	98	}
78	99	return $control;
79	100	}
80	101
81		- private function apply_dominant_color_background( $control, $value, $selector ) {
82		- $metadata = wp_get_attachment_metadata( $value['id'] );
83		- $dominant_color = Utils::get_array_value_by_keys( $metadata, [ 'dominant_color' ] );
84		- if ( $dominant_color ) {
85		- $control['selectors'][ $selector ] .= "background-color: #{$dominant_color};";
86		- }
87		- return $control;
88		- }
89		-
90	102	public function __construct() {
91	103	parent::__construct();
92	104
93		- // Disable lazyload in admin area (true if inside WordPress administration interface - Editor, Admin, etc.)
94		- if ( is_admin() ) {
95		- return;
96		- }
97		-
98	105	add_action( 'elementor/element/after_add_attributes', function( Element_Base $element ) {
99	106	$this->update_element_attributes( $element );
100	107	} );
101	108
	109	+ add_filter('elementor/files/css/property', function( $value, $css_property, $matches, $control ) {
	110	+ return $this->reduce_background_image_size( $value, $css_property, $matches, $control );
	111	+ }, 10, 4 );
	112	+
102	113	add_filter('elementor/files/css/selectors', function( $control, $value ) {
103	114	return $this->append_lazyload_selector( $control, $value );
104	115	}, 10, 2 );
105	116
		@@ -112,32 +123,9 @@
112	123	$this->enqueue_styles();
113	124	} );
114	125
115	126	add_action( 'wp_footer', function() {
116		- ?>
117		- <script type='text/javascript' defer>
118		- document.addEventListener( 'DOMContentLoaded', function() {
119		- const dataAttribute = 'data-e-bg-lazyload';
120		- const lazyloadBackgrounds = document.querySelectorAll( `[${ dataAttribute }]:not(.lazyloaded)` );
121		- const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
122		- entries.forEach( ( entry ) => {
123		- if ( entry.isIntersecting ) {
124		- let lazyloadBackground = entry.target;
125		- const lazyloadSelector = lazyloadBackground.getAttribute( dataAttribute );
126		- if ( lazyloadSelector ) {
127		- lazyloadBackground = entry.target.querySelector( lazyloadSelector );
128		- }
129		- lazyloadBackground.classList.add( 'lazyloaded' );
130		- lazyloadBackgroundObserver.unobserve( entry.target );
131		- }
132		- });
133		- }, { rootMargin: '100px 0px 100px 0px' } );
134		- lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
135		- lazyloadBackgroundObserver.observe( lazyloadBackground );
136		- } );
137		- } );
138		- </script>
139		- <?php
	127	+ $this->enqueue_scripts();
140	128	} );
141	129
142	130	}
143	131	}