Placeholders cannot also act as fallbacks inside of amp-img tags

[dlras2]

What's the issue?

amp-img tags with placeholders but no fallback remove the placeholder on failed load. The documentation seems to indicate that the placeholder should be used as a fallback if none exists. (Though I'm unsure if externally loaded images constitute "dynamic content" in this context.)

There appears to be no way to get this behavior without duplicating the nested elements.

How do we reproduce the issue?

See jsbin here. Note how the placeholder texts flash in while the image request is in flight. When the image request fails, the placeholder is removed. Fallback text is then visible only if that element is not also the placeholder.

If necessary, artificially slowing the network via debugging tools can make this more apparent.

What browsers are affected?

Latest Chrome (desktop and Android), Firefox (desktop), IE 11, and Edge

Which AMP version is affected?

1515614886756

[aghassemi]

@dlras2 Correct, currently same tag can not be used as both placeholder and fallback at the same time.

Somewhat related issue: #10321

[aghassemi]

What we should fix here:
I think it makes sense for amp-img to follow the same model as amp-list and essentially do:

If the image fails to load:
  If there's a fallback element, display the fallback.
  Otherwise, continue displaying the placeholder.

This will be a change in behaviour, so we should be mindful of situations this may have negative effects. Possibly keep it under an experiment flag, slowing ramping it up to 100%.

/cc @ericlindley-g

[ericlindley-g]

If I understand correctly, if we make this change, there is one case that gets easier, and one case that harder:

a) Developer wants placeholder and fallback to be the same (would be much easier)
b) Developer wants to keep the default loading indicator, but wants to provide a custom fallback (becomes impossible without cloning default loading indicator and manually adding it as placeholder)

It's hard to know without doing a proper look at a large number of sites, but I expect (b) to actually be more common than (a)

If my understanding is correct, I think we shouldn't make this change, and should instead provide an explicit way to use the same content for both fallback and placeholder. WDYT?

[aghassemi]

@ericlindley-g (a) is correct, this will make it easier (and consistent with other components) but for (b) this is purely for the case when image fails to load. So (b) is still possible by just providing different placeholder and fallback. By default, during load placeholder + loading overlay show up. If image fails, then both go away and fallback is shown.

[ericlindley-g]

Got it — thanks for explaining. If placeholder + loading overlay show up anyway, then the proposal before my comment SGTM!

[ampprojectbot]

This issue hasn't been updated in awhile. @cathyxz Do you have any updates?

[cathyxz]

Probably won't get to this anytime soon, but I think @aghassemi has a project for it. this is part of the new sizes & srcset project that @aghassemi is curating.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[HarveyPeachey]

What was the status of this issue? I know it's been 3 years so a very long time. Would be very useful if this feature was included to help solve bbc/simorgh#8811.