Skip to content

Commit

Permalink
Closes #6146 - Lazyload for CSS background images (#6203)
Browse files Browse the repository at this point in the history 
Co-authored-by: Gael <gael@wp-media.me>
  • Loading branch information
@Miraeld
Miraeld and Gael authored Oct 9, 2023
1 parent a9a871a commit deadda9
Show file tree
Hide file tree
Showing 14 changed files with 129 additions and 39 deletions.
2 changes: 1 addition & 1 deletion assets/js/lazyload-css.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion assets/js/lazyload-css.min.js.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 14 additions & 1 deletion inc/Engine/Media/Lazyload/CSS/Front/TagGenerator.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,18 @@ class TagGenerator {
* @return string
*/
public function generate( array $mapping, array $loaded = [] ): string {
$mapping = array_filter(
$mapping,
function ( $mapping_item ) use ( $loaded ) {
foreach ( $loaded as $exclude_item ) {
if ( $exclude_item['style'] === $mapping_item['style'] ) {
return false; // Exclude matching elements.
}
}
return true; // Include non-matching elements.
}
);
$mapping = array_values( $mapping );
$loaded_content = '';
foreach ( $loaded as $item ) {
$loaded_content .= $item['style'];
Expand All @@ -27,8 +39,9 @@ public function generate( array $mapping, array $loaded = [] ): string {
</noscript>";

$mapping_json = wp_json_encode( $mapping );
$loaded_json = wp_json_encode( $loaded );

$script_content = "const rocket_pairs = $mapping_json;";
$script_content = "const rocket_pairs = $mapping_json; const rocket_excluded_pairs = $loaded_json;";

$script_tag = "<script type=\"application/javascript\">$script_content</script>";

Expand Down
14 changes: 13 additions & 1 deletion src/js/global/lazyload-css.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
function rocket_css_lazyload_launch() {

const usable_pairs = typeof rocket_pairs === 'undefined' ? [] : rocket_pairs;
const excluded_pairs = typeof rocket_excluded_pairs === 'undefined' ? [] : rocket_excluded_pairs;

excluded_pairs.map(pair => {
const selector = pair.selector;
const nodes = document.querySelectorAll(selector);
nodes.forEach(el => {
el.setAttribute(`data-rocket-lazy-bg-${pair.hash}`, 'excluded');
});
});



const styleElement = document.querySelector('#wpr-lazyload-bg');
Expand Down Expand Up @@ -40,7 +50,9 @@ function rocket_css_lazyload_launch() {

const elements = document.querySelectorAll(pair.selector);
elements.forEach(el => {
if(el.getAttribute(`data-rocket-lazy-bg-${pair.hash}`) === 'loaded') {
if( el.getAttribute(`data-rocket-lazy-bg-${pair.hash}`) === 'loaded' ||
el.getAttribute(`data-rocket-lazy-bg-${pair.hash}`) === 'excluded')
{
return;
}
observer.observe(el);
Expand Down
12 changes: 6 additions & 6 deletions tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Front/TagGenerator/generate.php
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<?php

$tags = <<<TAG
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion">:root{--wpr-bg-`.internal-css-background-image`: url(https://domain.ext/path/to/background.ext); }</style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion">:root{--wpr-bg-15ef8: url(https://domain.ext/path/to/background.ext); }</style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-`.internal-css-background-image`: url(https://domain.ext/path/to/background.ext); }:root{--wpr-bg-`#section_2_hash`: url(https://domain.ext/path/to/background2.ext); }</style>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-16ef9: url(https://domain.ext/path/to/background2.ext); }</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".internal-css-background-image","style":":root{--wpr-bg-`.internal-css-background-image`: url(https:\/\/domain.ext\/path\/to\/background.ext); }"},{"selector":"#section_2_hash","style":":root{--wpr-bg-`#section_2_hash`: url(https:\/\/domain.ext\/path\/to\/background2.ext); }"}];</script>
<script type="application/javascript">const rocket_pairs = [{"selector":"#section_2_hash","style":":root{--wpr-bg-16ef9: url(https:\/\/domain.ext\/path\/to\/background2.ext); }"}]; const rocket_excluded_pairs = [{"selector":".internal-css-background-image","style":":root{--wpr-bg-15ef8: url(https:\/\/domain.ext\/path\/to\/background.ext); }"}];</script>
TAG;


Expand All @@ -15,17 +15,17 @@
'mapping' => [
[
'selector' => '.internal-css-background-image',
'style' => ':root{--wpr-bg-`.internal-css-background-image`: url(https://domain.ext/path/to/background.ext); }'
'style' => ':root{--wpr-bg-15ef8: url(https://domain.ext/path/to/background.ext); }'
],
[
'selector' => '#section_2_hash',
'style' => ":root{--wpr-bg-`#section_2_hash`: url(https://domain.ext/path/to/background2.ext); }"
'style' => ":root{--wpr-bg-16ef9: url(https://domain.ext/path/to/background2.ext); }"
],
],
'loaded' => [
[
'selector' => '.internal-css-background-image',
'style' => ':root{--wpr-bg-`.internal-css-background-image`: url(https://domain.ext/path/to/background.ext); }'
'style' => ':root{--wpr-bg-15ef8: url(https://domain.ext/path/to/background.ext); }'
],
],
],
Expand Down
2 changes: 1 addition & 1 deletion tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Subscriber/integration/CSS/external.css.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[{"selector":".external-css-background","style":":root{--wpr-bg-hash: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/11\/Test-Logo.svg');}","hash":"hash"},{"selector":".external-css-background-image","style":":root{--wpr-bg-hash: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"hash"},{"selector":".external-css-background-images","style":":root{--wpr-bg-hash: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/styles\/.\/wp-content\/rocket-test-data\/images\/test.png');}","hash":"hash"},{"selector":".external-css-background-images","style":":root{--wpr-bg-hash: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"hash"},{"selector":".external-css-background-image-gradient","style":":root{--wpr-bg-hash: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"hash"},{"selector":".external-css-background-image-space","style":":root{--wpr-bg-hash: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/styles\/..\/rocket-test-data\/images\/papertest.jpeg');}","hash":"hash"},{"selector":".external-css-background-image-space","style":":root{--wpr-bg-hash: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/images\/papertest.jpeg');}","hash":"hash"}]
[{"selector":".external-css-background","style":":root{--wpr-bg-17ef10: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/11\/Test-Logo.svg');}","hash":"17ef10"},{"selector":".external-css-background-image","style":":root{--wpr-bg-18ef11: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"18ef11"},{"selector":".external-css-background-images","style":":root{--wpr-bg-19ef12: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/styles\/.\/wp-content\/rocket-test-data\/images\/test.png');}","hash":"19ef12"},{"selector":".external-css-background-images","style":":root{--wpr-bg-25ef18: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"25ef18"},{"selector":".external-css-background-image-gradient","style":":root{--wpr-bg-25ef18: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"25ef18"},{"selector":".external-css-background-image-space","style":":root{--wpr-bg-20ef13: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/styles\/..\/rocket-test-data\/images\/papertest.jpeg');}","hash":"20ef13"},{"selector":".external-css-background-image-space","style":":root{--wpr-bg-21ef14: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/images\/papertest.jpeg');}","hash":"21ef14"}]
6 changes: 3 additions & 3 deletions ...Fixtures/inc/Engine/Media/Lazyload/CSS/Subscriber/integration/CSS/external_lazyloaded.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
.external-css-background-image{width:100%;height:400px;background-image:var(--wpr-bg-hash);background-color:#ccc}.external-css-background-images{width:100%;height:400px;background-image:var(--wpr-bg-hash),var(--wpr-bg-hash);background-color:#3dd83d}.external-css-background-image-gradient{width:100%;height:400px;background-image:linear-gradient(rgba(0,0,255,.5),rgba(255,255,0,.5)),var(--wpr-bg-hash)}.external-css-background{background:var(--wpr-bg-hash) no-repeat #c63dd8}
.external-css-background-image{width:100%;height:400px;background-image:var(--wpr-bg-18ef11);background-color:#ccc}.external-css-background-images{width:100%;height:400px;background-image:var(--wpr-bg-19ef12),var(--wpr-bg-25ef18);background-color:#3dd83d}.external-css-background-image-gradient{width:100%;height:400px;background-image:linear-gradient(rgba(0,0,255,.5),rgba(255,255,0,.5)),var(--wpr-bg-25ef18)}.external-css-background{background:var(--wpr-bg-17ef10) no-repeat #c63dd8}
.external-css-background-image-space{
width: 100%;
height: 400px;
background-image: var(--wpr-bg-hash);
background-image: var(--wpr-bg-20ef13);
background-color: #cccccc;
}
.external-css-background-image-space{
width: 100%;
height: 400px;
background-image: var(--wpr-bg-hash);
background-image: var(--wpr-bg-21ef14);
background-color: #cccccc;
}
.external-css-background-image-svg{
Expand Down
2 changes: 1 addition & 1 deletion tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Subscriber/integration/CSS/lazyload.css.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[{"selector":".external-css-background","style":":root{--wpr-bg-hash: url('http:\/\/example.org\/test.png');}","hash":"hash"},{"selector":".external-css-backgroundsvg","style":":root{--wpr-bg-hash: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/11\/Test-Logo.svg');}","hash":"hash"},{"selector":".external-css-background-image","style":":root{--wpr-bg-hash: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"hash"},{"selector":".external-css-background-images","style":":root{--wpr-bg-hash: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/test.png');}","hash":"hash"},{"selector":".external-css-background-images","style":":root{--wpr-bg-hash: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"hash"},{"selector":".external-css-background-image-gradient","style":":root{--wpr-bg-hash: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"hash"}]
[{"selector":".external-css-background","style":":root{--wpr-bg-16ef9: url('http:\/\/example.org\/test.png');}","hash":"16ef9"},{"selector":".external-css-backgroundsvg","style":":root{--wpr-bg-17ef10: url('https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/11\/Test-Logo.svg');}","hash":"17ef10"},{"selector":".external-css-background-image","style":":root{--wpr-bg-18ef11: url('https:\/\/new.rocketlabsqa.ovh\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"18ef11"},{"selector":".external-css-background-images","style":":root{--wpr-bg-15ef8: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/test.png');}","hash":"15ef8"},{"selector":".external-css-background-images","style":":root{--wpr-bg-25ef18: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"25ef18"},{"selector":".external-css-background-image-gradient","style":":root{--wpr-bg-25ef18: url('http:\/\/example.org\/wp-content\/rocket-test-data\/images\/paper.jpeg');}","hash":"25ef18"}]
10 changes: 5 additions & 5 deletions tests/Fixtures/inc/Engine/Media/Lazyload/CSS/Subscriber/integration/CSS/lazyloaded.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,22 @@
.external-css-background-image{
width: 100%;
height: 400px;
background-image: var(--wpr-bg-hash);
background-image: var(--wpr-bg-18ef11);
background-color: #cccccc;
}
.external-css-background-images{
width: 100%;
height: 400px;
background-image: var(--wpr-bg-hash), var(--wpr-bg-hash);
background-image: var(--wpr-bg-15ef8), var(--wpr-bg-25ef18);
background-color: #3dd83d;
}
.external-css-background-image-gradient{
width: 100%;
height: 400px;
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), var(--wpr-bg-hash);
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), var(--wpr-bg-25ef18);
}
.external-css-background{
background: var(--wpr-bg-hash) no-repeat;
background: var(--wpr-bg-16ef9) no-repeat;
background-color: #4fc1dd;
}

Expand All @@ -32,6 +32,6 @@
background-image:url(https://wprocketest.test/wp-content/uploads/2015/05/132204857.jpg);
}
*/
background: var(--wpr-bg-hash) no-repeat;
background: var(--wpr-bg-17ef10) no-repeat;
background-color: #c63dd8;
}
Loading

0 comments on commit deadda9

Please sign in to comment.