Skip to content

Improve logic to detect explicitly marked hero images#1198

Merged
sebastianbenz merged 3 commits intoampproject:mainfrom
schlessera:fix/lazy-loading-on-iframe-hero-image
Apr 12, 2021
Merged

Improve logic to detect explicitly marked hero images#1198
sebastianbenz merged 3 commits intoampproject:mainfrom
schlessera:fix/lazy-loading-on-iframe-hero-image

Conversation

@schlessera
Copy link
Copy Markdown
Collaborator

@schlessera schlessera commented Apr 9, 2021

The logic in #1196 fails to properly detect a nested construct, like if an iframe if marked with data-hero and its placeholder image is SSRed.

This PR improves the logic to properly detect these cases.


isMarkedAsHeroImage(node) {
while (node) {
if (!node.tagName) {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Why would tagName ever be empty?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

If it's not an element, but a different type of node. I initially tried to check for HTMLElement, but that didn't work as I expected.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

It seems elements are only ever passed into this function, but I guess this is good for hardening.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Yes, but this check is within a loop that loops from parent to parent, so this does not only check what is passed into the function, but every ancestor of it as well. And as elements can also be children of non-elements (see https://www.w3schools.com/jsref/prop_node_nodetype.asp), I think this is needed for some edge cases.

@westonruter
Copy link
Copy Markdown
Member

@schlessera @sebastianbenz I amended the PR with 16a1a85 which I've done in PHP via ampproject/amp-toolbox-php#149.

@sebastianbenz sebastianbenz merged commit 588f80b into ampproject:main Apr 12, 2021
@schlessera schlessera deleted the fix/lazy-loading-on-iframe-hero-image branch April 13, 2021 17:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants