Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-142435 -Fix for fetching the correct LCP #176

Closed
wants to merge 8 commits into from
Closed

MWPW-142435 -Fix for fetching the correct LCP #176

Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b600e5c
Update utils.js
Ruchika4 Feb 7, 2024
48d4ced
Update utils.js
Ruchika4 Feb 7, 2024
7637d9c
Update utils.js
Ruchika4 Feb 7, 2024
1e01137
lint fix
Ruchika4 Feb 8, 2024
298f2f9
lint fix
Ruchika4 Feb 8, 2024
113dba3
incorporate review comment
Ruchika4 Feb 21, 2024
cbf14e3
Update utils.js
Ruchika4 Feb 21, 2024
a89afa5
Update utils.js
Ruchika4 Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions creativecloud/scripts/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,22 +58,23 @@ function getDecorateAreaFn() {
if (lcpImg) lcpImgSet = true;
};

async function loadLCPImage(area = document, { fragmentLink = null } = {}) {
const firstBlock = area.querySelector('body > main > div > div');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ruchika4 In Milo also, the first div is getting selected : const firstDiv = document.querySelector('body > main > div:nth-child(1) > div');

Does this change need to go in Milo?

Copy link
Contributor Author

@Ruchika4 Ruchika4 Feb 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure about this @salonijain3 . However as most of our pages will breadcrumb as first div we'll not be able to load the LCP eagerly if we look for first div to be marquee.

async function loadLCPImage(area = document, { fragmentLink = null } = {}) {
const marquee = area.querySelector('.marquee');
const interactiveMarquee = area.querySelector('.interactive-marquee');
let fgDivs = null;
switch (true) {
case firstBlock?.classList.contains('changebg'): {
firstBlock.querySelector(':scope > div:nth-child(1)').querySelectorAll('img').forEach(eagerLoad);
case marquee != null:
eagerLoad(marquee.querySelector('img'));
break;
case interactiveMarquee?.classList.contains('changebg'): {
interactiveMarquee.querySelector(':scope > div:nth-child(1)').querySelectorAll('img').forEach(eagerLoad);
const { getConfig } = await import(`${getLibs()}/utils/utils.js`);
import(`${getConfig().codeRoot}/deps/interactive-marquee-changebg/changeBgMarquee.js`);
break;
}
case firstBlock?.classList.contains('marquee'):
firstBlock.querySelectorAll('img').forEach(eagerLoad);
break;
case firstBlock?.classList.contains('interactive-marquee'):
firstBlock.querySelector(':scope > div:nth-child(1)').querySelectorAll('img').forEach(eagerLoad);
fgDivs = firstBlock.querySelector(':scope > div:nth-child(2)').querySelectorAll('div:not(:first-child)');
case interactiveMarquee != null:
interactiveMarquee.querySelector(':scope > div:nth-child(1)').querySelectorAll('img').forEach(eagerLoad);
fgDivs = interactiveMarquee.querySelector(':scope > div:nth-child(2)').querySelectorAll('div:not(:first-child)');
fgDivs.forEach((d) => eagerLoad(d.querySelector('img')));
break;
case !!fragmentLink:
Expand Down
Loading