Jump to content

How do I make the page load completely before rendering?


Recommended Posts

I have an .html web page that has both caspio datapages and regular .html 

The issue I have is that the .html language renders instantly and the caspio datapages take more time.  As a result the page load looks super choppy, with the middle portion of the page laoding before the header.  I've seen solutions in stack overflow (not caspio related) that use prerender/ prepload, but most examples use a delay timer.  I don't want to artificailly delay the page by some chosen interval, I just want the page to render once the caspio datapages are loaded, however long that is.  Anyone have a ready solution?

Link to comment
Share on other sites

Hi daNoot!

Do you have access to editing HTML\CSS\JS of your webpage?
If so, the flow for implementing such a functionality is next:

1. Hide content of your page by adding "display: none;" to HTML element with the main content (that wraps embedded caspio widget as well)
2.  And add next line of JavaScript 

<script>
document.addEventListener('DataPageReady', _=> {
document.querySelector('CSS SELECTOR OF THAT HIDDEN ELEMENT').style =  "display: block;"
})
</script>

This script means that after Caspio widget loads, content on the page will be shown at once.

To make it more appealing, some custom loader can be added to the page as well.

You can also share a link to the page where the Caspio widget is deployed and I can give you more specific advice
 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...