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.

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

Improve logic to detect explicitly marked hero images #1198

Merged

Conversation

schlessera
Copy link
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
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
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
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
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
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