← All changes | modules/lazyload/module.php +183 -65 4.2.0 → 3.16.2 View file →

		@@ -1,98 +1,216 @@
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
	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	+ }
	31	+
	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	+ );
	39	+ }
	40	+
	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	+ }
	63	+ }
	64	+ }
	65	+
	66	+ private function append_lazyload_selector( $control, $value ) {
	67	+ $is_dominant_color_enabled = $this->is_dominant_color_enabled();
	68	+
	69	+ if ( Utils::get_array_value_by_keys( $control, [ 'background_lazyload', 'active' ] ) ) {
	70	+ foreach ( $control['selectors'] as $selector => $css_property ) {
	71	+ if ( 0 === strpos( $css_property, 'background-image' ) ) {
	72	+ if ( ! empty( $value['url'] ) ) {
	73	+ $css_property = str_replace( 'url("{{URL}}")', 'var(--e-bg-lazyload-loaded)', $css_property );
	74	+ $control['selectors'][ $selector ] = $css_property . '--e-bg-lazyload: url("' . $value['url'] . '");';
	75	+
	76	+ if ( $is_dominant_color_enabled ) {
	77	+ $dominant_color = $this->get_dominant_color( $value['id'] );
	78	+ if ( $dominant_color ) {
	79	+ $control['selectors'][ $selector ] .= "background-color: #{$dominant_color} ;";
	80	+ }
	81	+ }
	82	+ }
	83	+ }
	84	+ }
	85	+ }
	86	+ return $control;
	87	+ }
	88	+
	89	+ private function is_dominant_color_enabled() {
	90	+ if ( ! function_exists( 'perflab_get_active_modules' ) ) {
	91	+ return false;
	92	+ }
	93	+
	94	+ $active_modules = perflab_get_active_modules();
	95	+
	96	+ return in_array( 'images/dominant-color', $active_modules, true );
	97	+ }
	98	+
	99	+ private function get_dominant_color( $attachment_id ) {
	100	+ $metadata = wp_get_attachment_metadata( $attachment_id );
	101	+
	102	+ // Performance Lab adds these metadata
	103	+ $has_transparency = $metadata['has_transparency'] ?? false;
	104	+ $dominant_color = esc_attr( $metadata['dominant_color'] ?? false );
	105	+
	106	+ if ( $dominant_color && ! $has_transparency ) {
	107	+ return $dominant_color;
	108	+ }
	109	+
	110	+ return false;
	111	+ }
	112	+
	113	+ private function is_document_support_lazyload( $post_id ) {
	114	+ if ( ! $post_id ) {
	115	+ return false;
	116	+ }
	117	+
	118	+ $document = \Elementor\Plugin::$instance->documents->get( $post_id );
	119	+
	120	+ if ( $document ) {
	121	+ $support_lazyload = $document->get_property( 'support_lazyload' );
	122	+ if ( false === $support_lazyload ) {
	123	+ return false;
	124	+ }
	125	+ }
	126	+
	127	+ return true;
	128	+ }
	129	+
17	130	public function __construct() {
18	131	parent::__construct();
19	132
20		- add_action( 'init', [ $this, 'init' ] );
21		- }
22		-
23		- public function init() {
24		- if ( ! $this->is_lazy_load_background_images_enabled() ) {
	133	+ // Disable lazyload in admin area (true if inside WordPress administration interface - Editor, Admin, etc.)
	134	+ if ( is_admin() ) {
25	135	return;
26	136	}
27	137
28		- add_action( 'wp_head', function() {
29		- if ( ! $this->should_lazy_load_background_images() ) {
	138	+ add_action( 'elementor/element/after_add_attributes', function( Element_Base $element ) {
	139	+
	140	+ $current_document = \Elementor\Plugin::$instance->documents->get_current();
	141	+
	142	+ if ( ! $current_document ) {
30	143	return;
31	144	}
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;
42		- }
43		- }
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
	145	+
	146	+ $post_id = $current_document->get_main_id();
	147	+
	148	+ if ( ! $this->is_document_support_lazyload( $post_id ) ) {
	149	+ return;
	150	+ }
	151	+
	152	+ $this->update_element_attributes( $element );
52	153	} );
53	154
	155	+ add_filter('elementor/files/css/selectors', function( $control, $value, $css_instance ) {
	156	+
	157	+ $post_id = method_exists( $css_instance, 'get_post_id' ) ? $css_instance->get_post_id() : false;
	158	+
	159	+ if ( ! $post_id ) {
	160	+ return $control;
	161	+ }
	162	+
	163	+ if ( ! $this->is_document_support_lazyload( $post_id ) ) {
	164	+ return $control;
	165	+ }
	166	+
	167	+ return $this->append_lazyload_selector( $control, $value );
	168	+ }, 10, 3);
	169	+
	170	+ add_filter( 'body_class', function( $classes ) {
	171	+ $classes[] = 'e-lazyload';
	172	+ return $classes;
	173	+ } );
	174	+
	175	+ add_action( 'wp_enqueue_scripts', function() {
	176	+ $this->enqueue_styles();
	177	+ } );
	178	+
54	179	add_action( 'wp_footer', function() {
55		- if ( ! $this->should_lazy_load_background_images() ) {
56		- return;
57		- }
58	180	?>
59		- <script>
60		- ( () => {
61		- const lazyloadRunObserver = () => {
62		- const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
63		- const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
64		- entries.forEach( ( entry ) => {
65		- if ( entry.isIntersecting ) {
66		- let lazyloadBackground = entry.target;
67		- if( lazyloadBackground ) {
68		- lazyloadBackground.classList.add( 'e-lazyloaded' );
69		- }
70		- lazyloadBackgroundObserver.unobserve( entry.target );
71		- }
72		- });
73		- }, { rootMargin: '200px 0px 200px 0px' } );
74		- lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
75		- lazyloadBackgroundObserver.observe( lazyloadBackground );
76		- } );
77		- };
78		- const events = [
79		- 'DOMContentLoaded',
80		- 'elementor/lazyload/observe',
81		- ];
82		- events.forEach( ( event ) => {
83		- document.addEventListener( event, lazyloadRunObserver );
	181	+ <script type='text/javascript'>
	182	+ const lazyloadRunObserver = () => {
	183	+ const dataAttribute = 'data-e-bg-lazyload';
	184	+ const lazyloadBackgrounds = document.querySelectorAll( `[${ dataAttribute }]:not(.lazyloaded)` );
	185	+ const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
	186	+ entries.forEach( ( entry ) => {
	187	+ if ( entry.isIntersecting ) {
	188	+ let lazyloadBackground = entry.target;
	189	+ const lazyloadSelector = lazyloadBackground.getAttribute( dataAttribute );
	190	+ if ( lazyloadSelector ) {
	191	+ lazyloadBackground = entry.target.querySelector( lazyloadSelector );
	192	+ }
	193	+ if( lazyloadBackground ) {
	194	+ lazyloadBackground.classList.add( 'lazyloaded' );
	195	+ }
	196	+ lazyloadBackgroundObserver.unobserve( entry.target );
	197	+ }
	198	+ });
	199	+ }, { rootMargin: '100px 0px 100px 0px' } );
	200	+ lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
	201	+ lazyloadBackgroundObserver.observe( lazyloadBackground );
84	202	} );
85		- } )();
	203	+ };
	204	+ const events = [
	205	+ 'DOMContentLoaded',
	206	+ 'elementor/lazyload/observe',
	207	+ ];
	208	+ events.forEach( ( event ) => {
	209	+ document.addEventListener( event, lazyloadRunObserver );
	210	+ } );
86	211	</script>
87	212	<?php
88	213	} );
89		- }
90	214
91		- private function should_lazy_load_background_images(): bool {
92		- return ! is_admin() && ! Plugin::$instance->preview->is_preview_mode() && ! Plugin::$instance->editor->is_edit_mode();
93		- }
94		-
95		- private static function is_lazy_load_background_images_enabled(): bool {
96		- return '1' === get_option( 'elementor_lazy_load_background_images', '1' );
97	215	}
98	216	}