Charger une tierce partie iframe in React après la charge de la page, de sorte que l'IFrame n'affecte pas la score PURSPEED

Question

J'ai un iframe qui charge un widget tiers. Je veux seulement afficher ceci iframe après que ma page a été chargée, car je ne veux pas ralentir la vitesse de la charge de la page. J'ai suivi un article moyen qui décrit comment faire cela, mais leur solution ne fonctionne pas car la fonction onload fonction, finishLoading, n'est jamais appelé

export default ({src, width, height}) => {

  const [loading, stillLoading] = useState(true)
  const finishLoading = () => {
      alert('finished loading')
      stillLoading(false)
  }
  ...
  return(
    {loading ? '' : 
      <iframe
        src={src}
        width={width}
        height={height}
        scrolling="no"
        onLoad={finishLoading}
      >
        className={`tpwidget flex-center-row`}>
      </iframe>
    }
  )
}

---

Mise à jour

En utilisant useeffect, je peux obtenir l'iframe de charger après tout le reste (théoriquement) mais je trouve que la suppression de l'iframe améliore complètement mon score PagesPeed et que je ne fais que charger l'iframe après (en utilisant useeffect) n'a pas beaucoup d'effet positif. sur PagesPeed.

---

Si cela aide, le domaine est soudainementask.com et le widget tiers est les annonces amazoniennes.

Answer 1

Vous pouvez utiliser la fenêtre Window.Onload pour charger iframe pendant l'exécution.

function loadDeferredIframe() {
    // this function will load the Google homepage into the iframe
    var iframe = document.getElementById("my-deferred-iframe");
    iframe.src = "./" // here goes your url
};
window.onload = loadDeferredIframe;

Au début, vous pouvez avoir un élément iframe pointant sur vide et peut changer le SRC pendant l'exécution.

<iframe id="my-deferred-iframe" src="about:blank" />

Answer 2

Vous devez utiliser useEffect() crochet.

useEffect(() => {
  stillLoading(false)
}, [])

Dans ce cas stillLoading(false) ne sera appliqué qu'après le montage du composant. Donc, à la fin de votre condition fonctionnera après avoir chargé la page.