| 1 |
<?php |
| 2 |
namespace Elementor\Modules\LazyLoad; |
| 3 |
|
| 4 |
use Elementor\Core\Base\Module as BaseModule; |
| 5 |
use Elementor\Core\Experiments\Manager as Experiments_Manager; |
| 6 |
use Elementor\Plugin; |
| 7 |
|
| 8 |
if ( ! defined( 'ABSPATH' ) ) { |
| 9 |
exit; // Exit if accessed directly |
| 10 |
} |
| 11 |
|
| 12 |
class Module extends BaseModule { |
| 13 |
|
| 14 |
const EXPERIMENT_NAME = 'e_lazyload'; |
| 15 |
|
| 16 |
public function get_name() { |
| 17 |
return 'lazyload'; |
| 18 |
} |
| 19 |
|
| 20 |
public static function get_experimental_data() { |
| 21 |
return [ |
| 22 |
'name' => static::EXPERIMENT_NAME, |
| 23 |
'title' => esc_html__( 'Lazy Load Background Images', 'elementor' ), |
| 24 |
'tag' => esc_html__( 'Performance', 'elementor' ), |
| 25 |
'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' ), |
| 26 |
'release_status' => Experiments_Manager::RELEASE_STATUS_BETA, |
| 27 |
'default' => Experiments_Manager::STATE_INACTIVE, |
| 28 |
'new_site' => [ |
| 29 |
'default_active' => true, |
| 30 |
'minimum_installation_version' => '3.21.0', |
| 31 |
], |
| 32 |
'generator_tag' => true, |
| 33 |
]; |
| 34 |
} |
| 35 |
|
| 36 |
public function __construct() { |
| 37 |
parent::__construct(); |
| 38 |
|
| 39 |
add_action( 'init', [ $this, 'init' ] ); |
| 40 |
} |
| 41 |
|
| 42 |
public function init() { |
| 43 |
add_action( 'wp_head', function() { |
| 44 |
if ( ! $this->should_lazyload() ) { |
| 45 |
return; |
| 46 |
} |
| 47 |
?> |
| 48 |
<style> |
| 49 |
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload), |
| 50 |
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { |
| 51 |
background-image: none !important; |
| 52 |
} |
| 53 |
@media screen and (max-height: 1024px) { |
| 54 |
.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload), |
| 55 |
.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * { |
| 56 |
background-image: none !important; |
| 57 |
} |
| 58 |
} |
| 59 |
@media screen and (max-height: 640px) { |
| 60 |
.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload), |
| 61 |
.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * { |
| 62 |
background-image: none !important; |
| 63 |
} |
| 64 |
} |
| 65 |
</style> |
| 66 |
<?php |
| 67 |
} ); |
| 68 |
|
| 69 |
add_action( 'wp_footer', function() { |
| 70 |
if ( ! $this->should_lazyload() ) { |
| 71 |
return; |
| 72 |
} |
| 73 |
?> |
| 74 |
<script type='text/javascript'> |
| 75 |
const lazyloadRunObserver = () => { |
| 76 |
const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); |
| 77 |
const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { |
| 78 |
entries.forEach( ( entry ) => { |
| 79 |
if ( entry.isIntersecting ) { |
| 80 |
let lazyloadBackground = entry.target; |
| 81 |
if( lazyloadBackground ) { |
| 82 |
lazyloadBackground.classList.add( 'e-lazyloaded' ); |
| 83 |
} |
| 84 |
lazyloadBackgroundObserver.unobserve( entry.target ); |
| 85 |
} |
| 86 |
}); |
| 87 |
}, { rootMargin: '200px 0px 200px 0px' } ); |
| 88 |
lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { |
| 89 |
lazyloadBackgroundObserver.observe( lazyloadBackground ); |
| 90 |
} ); |
| 91 |
}; |
| 92 |
const events = [ |
| 93 |
'DOMContentLoaded', |
| 94 |
'elementor/lazyload/observe', |
| 95 |
]; |
| 96 |
events.forEach( ( event ) => { |
| 97 |
document.addEventListener( event, lazyloadRunObserver ); |
| 98 |
} ); |
| 99 |
</script> |
| 100 |
<?php |
| 101 |
} ); |
| 102 |
} |
| 103 |
|
| 104 |
private function should_lazyload() { |
| 105 |
return ! is_admin() && ! Plugin::$instance->preview->is_preview_mode() && ! Plugin::$instance->editor->is_edit_mode(); |
| 106 |
} |
| 107 |
} |
| 108 |
|
