← All changes | modules/lazyload/module.php +101 -59 4.0.7 → 3.9.0 View file →

		@@ -1,96 +1,138 @@
1	1	<?php
2	2	namespace Elementor\Modules\LazyLoad;
3	3
4	4	use Elementor\Core\Base\Module as BaseModule;
5		-use Elementor\Plugin;
	5	+use Elementor\Core\Experiments\Manager as Experiments_Manager;
	6	+use Elementor\Element_Base;
	7	+use Elementor\Utils;
6	8
7	9	if ( ! defined( 'ABSPATH' ) ) {
8		- exit; // Exit if accessed directly.
	10	+ exit; // Exit if accessed directly
9	11	}
10	12
11	13	class Module extends BaseModule {
12	14
	15	+ const EXPERIMENT_NAME = 'e_lazyload';
	16	+
13	17	public function get_name() {
14	18	return 'lazyload';
15	19	}
16	20
17		- public function __construct() {
18		- parent::__construct();
	21	+ public static function get_experimental_data() {
	22	+ return [
	23	+ 'name' => static::EXPERIMENT_NAME,
	24	+ 'title' => esc_html__( 'Lazy Load Background Images', 'elementor' ),
	25	+ 'tag' => esc_html__( 'Performance', 'elementor' ),
	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,
	28	+ 'default' => Experiments_Manager::STATE_INACTIVE,
	29	+ ];
	30	+ }
19	31
20		- add_action( 'init', [ $this, 'init' ] );
	32	+ private function enqueue_styles() {
	33	+ wp_enqueue_style(
	34	+ 'elementor-lazyload',
	35	+ $this->get_css_assets_url( 'modules/lazyload/frontend' ),
	36	+ [],
	37	+ ELEMENTOR_VERSION
	38	+ );
21	39	}
22	40
23		- public function init() {
24		- if ( ! $this->is_lazy_load_background_images_enabled() ) {
25		- return;
	41	+ private function update_element_attributes( Element_Base $element ) {
	42	+ $settings = $element->get_settings_for_display();
	43	+ $controls = $element->get_controls();
	44	+ $lazyload_attribute_name = 'data-e-bg-lazyload';
	45	+
	46	+ $controls_with_background_image = array_filter( $controls, function( $control ) {
	47	+ return Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] );
	48	+ } );
	49	+
	50	+ foreach ( $controls_with_background_image as $control_name => $control_data ) {
	51	+ $keys = Utils::get_array_value_by_keys( $control_data, [ 'background_lazyload', 'keys' ] );
	52	+ $background_image_url = Utils::get_array_value_by_keys( $settings, $keys );
	53	+ if ( $background_image_url ) {
	54	+
	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	+ ] );
	61	+ }
	62	+ }
26	63	}
	64	+ }
27	65
28		- add_action( 'wp_head', function() {
29		- if ( ! $this->should_lazy_load_background_images() ) {
30		- return;
31		- }
32		- ?>
33		- <style>
34		- .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
35		- .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
36		- background-image: none !important;
37		- }
38		- @media screen and (max-height: 1024px) {
39		- .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
40		- .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {
41		- background-image: none !important;
	66	+ private function append_lazyload_selector( $control, $value ) {
	67	+ if ( Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] ) ) {
	68	+ foreach ( $control['selectors'] as $selector => $css_property ) {
	69	+ if ( 0 === strpos( $css_property, 'background-image' ) ) {
	70	+ if ( ! empty( $value['url'] ) ) {
	71	+ $css_property = str_replace( 'url("{{URL}}")', 'var(--e-bg-lazyload-loaded)', $css_property );
	72	+ $control['selectors'][ $selector ] = $css_property . '--e-bg-lazyload: url("' . $value['url'] . '");';
	73	+ $control = $this->apply_dominant_color_background( $control, $value, $selector );
42	74	}
43	75	}
44		- @media screen and (max-height: 640px) {
45		- .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
46		- .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {
47		- background-image: none !important;
48		- }
49		- }
50		- </style>
51		- <?php
	76	+ }
	77	+ }
	78	+ return $control;
	79	+ }
	80	+
	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	+ public function __construct() {
	91	+ parent::__construct();
	92	+
	93	+ add_action( 'elementor/element/after_add_attributes', function( Element_Base $element ) {
	94	+ $this->update_element_attributes( $element );
52	95	} );
53	96
	97	+ add_filter('elementor/files/css/selectors', function( $control, $value ) {
	98	+ return $this->append_lazyload_selector( $control, $value );
	99	+ }, 10, 2 );
	100	+
	101	+ add_filter( 'body_class', function( $classes ) {
	102	+ $classes[] = 'e-lazyload';
	103	+ return $classes;
	104	+ } );
	105	+
	106	+ add_action( 'wp_enqueue_scripts', function() {
	107	+ $this->enqueue_styles();
	108	+ } );
	109	+
54	110	add_action( 'wp_footer', function() {
55		- if ( ! $this->should_lazy_load_background_images() ) {
56		- return;
57		- }
58	111	?>
59		- <script>
60		- const lazyloadRunObserver = () => {
61		- const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
	112	+ <script type='text/javascript' defer>
	113	+ document.addEventListener( 'DOMContentLoaded', function() {
	114	+ const dataAttribute = 'data-e-bg-lazyload';
	115	+ const lazyloadBackgrounds = document.querySelectorAll( `[${ dataAttribute }]:not(.lazyloaded)` );
62	116	const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
63		- entries.forEach( ( entry ) => {
64		- if ( entry.isIntersecting ) {
65		- let lazyloadBackground = entry.target;
66		- if( lazyloadBackground ) {
67		- lazyloadBackground.classList.add( 'e-lazyloaded' );
68		- }
69		- lazyloadBackgroundObserver.unobserve( entry.target );
	117	+ entries.forEach( ( entry ) => {
	118	+ if ( entry.isIntersecting ) {
	119	+ let lazyloadBackground = entry.target;
	120	+ const lazyloadSelector = lazyloadBackground.getAttribute( dataAttribute );
	121	+ if ( lazyloadSelector ) {
	122	+ lazyloadBackground = entry.target.querySelector( lazyloadSelector );
70	123	}
71		- });
72		- }, { rootMargin: '200px 0px 200px 0px' } );
	124	+ lazyloadBackground.classList.add( 'lazyloaded' );
	125	+ lazyloadBackgroundObserver.unobserve( entry.target );
	126	+ }
	127	+ });
	128	+ }, { rootMargin: '100px 0px 100px 0px' } );
73	129	lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
74	130	lazyloadBackgroundObserver.observe( lazyloadBackground );
75	131	} );
76		- };
77		- const events = [
78		- 'DOMContentLoaded',
79		- 'elementor/lazyload/observe',
80		- ];
81		- events.forEach( ( event ) => {
82		- document.addEventListener( event, lazyloadRunObserver );
83	132	} );
84	133	</script>
85	134	<?php
86	135	} );
87		- }
88	136
89		- private function should_lazy_load_background_images(): bool {
90		- return ! is_admin() && ! Plugin::$instance->preview->is_preview_mode() && ! Plugin::$instance->editor->is_edit_mode();
91		- }
92		-
93		- private static function is_lazy_load_background_images_enabled(): bool {
94		- return '1' === get_option( 'elementor_lazy_load_background_images', '1' );
95	137	}
96	138	}