Slow hosted form pop up

martin1b — Wed, 28 May 2014 13:44:02 GMT

I've added hosted forms to my site and noticed that when a user clicks to add payment method, it is pretty slow. The pop up appears immediately but for content to appear, it takes around 5 seconds or longer. Turned on fiddler and found the delay on a tunnel event to authorize.net.

What can I do to speed this up?

Bill

Re: Slow hosted form pop up

Trevor — Fri, 30 May 2014 20:03:54 GMT

5 seconds seems unusually long, but there is always going to be a delay in the way that this content is loaded. When working with a lightbox, the lightbox frame itself is rendered by javascript that the browser has already loaded and is practically instant. However, the content of the lightbox is yet to be loaded and will always take sometime to retreive across the internet. The exact length of this descrepancy could be heavily affected by the end-user's connection speed or similar factors. I don't have a way of speeding this up or making the limit go away altogether, but I can tell you a potential workaround.

When working with 3rd party content in a lightbox, the key is to try and load the content before displaying the lightbox to the end user at all. Here is a snippet of code from my own hosted CIM demonstration implementation that does just that. Specifically, this is the function called to make the lightbox visible to the end user.

anetPopup.open = function() {

// Draw the lightbox frame as a block element. This must be done if you are resizing the frame with the iFrameCommunicator because some browsers won't let you resize an element with a display style of "none"

document.getElementById("anetDiv").style.display = "block";

// Set the opacity to 0 so that the box is not actually visible to the end user just yet

document.getElementById("anetDiv").style.opacity = "0";

// Display some sort of loading animation to the customer so that they have feedback that something is happening

$(".loading").show();

// Use setTimeOut to wait 1 second (configurable) before making the popup actually visible to the end user

setTimeout(function(){document.getElementById("anetDiv").style.opacity = "1";},1000)

// Remove the loading animation, also after 1 second

setTimeout(function(){$(".loading").hide();},1000)

}

In my own testing, 1 second was enough of a delay so that the content is reliably loaded and ready to be presented to the end user.

topic Slow hosted form pop up in Integration and Testing

Slow hosted form pop up

Re: Slow hosted form pop up