Solution 1 :

I’m not too familiar with CardConnect however, you should be able to preload an iframe by appending the following link element to the head of your document:

<link rel="preload" href="" as="document">


Solution 2 :

You can show a loader by default and remove it on load of iframe.

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

Problem :

In my case, I need to display a credit card form, and use an iframe to load the credit card field from CardConnect (a secure external site). The problem is that once I display that form in a modal, it takes about a half second to load that iframe. I would like to pre render/load the iframe so once it is ready to display, it looks like it loaded immediately.

I tried techniques from this link with no luck:

I also tried memoizing the iframe, rendering it in a hidden div earlier in the app and calling on it again, but also no luck, it’s loaded twice.


Comment posted by charisz

Do you find any solution for this?

Comment posted by Davis Mariotti

Unfortunately not, it’s been on the back burner for a while now. I’ll update this question if I ever find a solution.

Comment posted by Davis Mariotti

This does not answer the question. I want it to be loaded before it is even visible.