Search code examples
amp-html

amp-img inside a div hidden is not displayed when I display the div


I have an amp-img element in a div that is hidden and this div is displayed when I select a radio input but in this moment the image is not displayed, the image only is displayed when I resize the browser.

What I need to do to display the image when I change the display of the div? I checked and saw that the element amp-img has no event, so what can I do?

Thanks, Rafael.


Solution

  • This is happening because AMP pages doesnt have the realtime update feature like websites made from Angular and NodeJS. That's why you will have to resort to manual refreshing. That's because AMP pages limits JS to a certain extent only.

    As per the docs

    Third-party JS likes to use synchronous JS loading. They also like to document.write more sync scripts. For example, if you have five ads on your page, and each of them cause three synchronous loads, each with a 1 second latency connection, you’re in 15 seconds of load time just for JS loading.

    AMP pages allow third-party JavaScript but only in sandboxed iframes. By restricting them to iframes, they can’t block the execution of the main page. Even if they trigger multiple style re-calculations, their tiny iframes have very little DOM.