Можете ли вы предварительно отобразить iframe в React, чтобы он загружался, когда это необходимо в приложении?

Question

В моем случае мне нужно отобразить форму кредитной карты и использовать iframe для загрузки поля кредитной карты из CardConnect (защищенный внешний сайт). Проблема в том, что, как только я отображаю эту форму в модальном режиме, загрузка этого iframe занимает около половины секунды. Я хотел бы предварительно выполнить рендеринг / загрузку iframe, чтобы, как только он был готов к отображению, он выглядел так, как будто он загружен немедленно.

Я испробовал приемы по этой ссылке безуспешно: https://hackernoon.com/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d

Я также пытался запоминать iframe, отображать его в скрытом div ранее в приложении и вызывать его снова, но тоже не повезло, он загружается дважды.

Answer 1

Я не слишком знаком с CardConnect, однако вы сможете предварительно загрузить iframe, добавив следующий элемент ссылки в заголовок вашего документа:

<link rel="preload" href="https://cardconnect.com/iframe.html" as="document">

Источник: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Answer 2

Вы можете показать загрузчик по умолчанию и удалить его при загрузке iframe.

<iframe onLoad={funtion to remove loader} />