CODEWITHSUNDEEP
javascriptjquery
gilesrpa
gilesrpa

Reputation: 1061

jquery document ready too slow

I have two pages within my website that both display a modal form. The pages are using the jModal plugin and all is working well.

The problem I have is as follows.

One page, everything is fine, performance is great.

On the second page everything is the same apart from it has some advertising on it which causes a small performance hit.

This hit is acceptable, but the resultant delay can allow a visitor to click on links on the page before the modal window has shown. Thus the visitor can miss the modal window.

The code is within a $().Ready which I believe is causing the problem as the page has to wait until the ad server has finished serving the ad.

I removed the $().Ready, but that just caused the code not to execute at all.

Is there a way of locking the page until the doc ready has executed?

Upvotes: 3

Views: 2438

Answers (4)

Mathew Berg
Mathew Berg

Reputation: 28750

One way would be to add an overlay to your site that is always there that you remove with $().Ready that would be on top of everything and not allow them to click.

Upvotes: 1

gilesrpa
gilesrpa

Reputation: 1061

Thank you all for your help.

In the end I added an overlay, quick, simple, does the job.

Upvotes: 0

kki3908050
kki3908050

Reputation: 165

put the modal window at the top of the page immediately below doc ready

Upvotes: 1

user1017882
user1017882

Reputation:

I'll offer this alternative option as it's the one I usually opt for.

The difference between how the document looks initially and when your jQuery fires can be mimnicked with styling.

For example (in your case), you have links exposed to the user whilst waiting for jQuery to hide them (in a roundabout way). Simply hide them with CSS first, then as part of your initial jQuery show them (once it's completely initialised).

I had this problem with a swiper on the UI; I had a massive list whose width would be set according to the swiper plugin (when initialised). Instead, I just set a massive width in my CSS file (deliberately over-compensating) then let the swiper plugin do it's stuff. A typical user wouldn't be able to tell.

Still not fool-proof, but CSS, in this instance, is a lot quicker than waiting for jQuery and, unlike the other option, you don't need to incorporate an additional overlay.

Upvotes: 1

Related Questions