Add a Loading Graphic
When used sparingly, loading gifs can reduce perceived load times by reassuring users with an immediate visual signal that content is being loaded. This article outlines two uses of loading gifs.
Loading gif generator
You can create a loading gif that matches your website style and color scheme using this online generator: http://ajaxload.info/. Upload this image to your web server and note the URL for use in your DataPages.
Display a loading image after form submission
This method displays a momentary loading image before the “Submission Successful” message. Although not technically necessary, some Caspio developers have stated that displaying a loading image after a large or important form creates confidence and provides piece-of-mind. If you believe your user-experience would be improved, you can choose to display a loading image for any number of milliseconds after a form has been submitted, before displaying the success message.
View a live example
Steps to add a loading graphic after form submission:
Click on the Submission Form where you would like the loading image to appear. Click Edit to open the DataPage Wizard. Proceed to the Destination and Triggers screen. Select the default radio button: “Display this message” and insert the following JavaScript:
<div id="loading"><img src="Loading Image URL"/><p>Your submission is being processed.</p></div>
<script>
function toggle(){
document.getElementById('successful').style.display = 'inline';
document.getElementById('loading').style.display = 'none';
}
setTimeout(toggle,1900);
</script>
Replace the Loading Image URL with the URL of your loading gif.
You can replace the “Your submission was successful.” and “Your submission is being processed.” messages with other text.
Finally, you can also increase or decrease the number of milliseconds (1900) before the loading bar toggles to the success message.
Add a loading image to mask slow loading content
A more common and practical use of a loading image is to temporarily mask content that takes some seconds to load. A loading graphic can be used when loading several DataPages simultaneously into a tabbed navigation widget or dashboard control, for example.
View a live example.
Before implementing this loading image solution, it is suggested that you first try to reduce your loading times by:
- Compressing all visible images
- Using thumbnail image links to larger images whenever possible
- Lowering the number of records visible per page
- Moving unnecessary fields out of the results page and into details pages
- Reducing the number of DataPages deployed to each web page
If you believe a loading image is still necessary after other optimizations have been made, it is important to also understand that your webpage is still loading its content inline, piece by piece. The loading image is a purely visual prompt to assure the user that the content is, in fact, loading.
That means, while the loading image is being displayed, all of the webpage content following that loading bar will remain inaccessible until the content has been loaded and the loading image toggles off. For this reason it is a good idea to move the slow loading content as close to the end of your webpage HTML as possible.
Note: this method does not function with .NET host pages due to a difference in their loading behavior.
Steps to adding a loading graphic around slow loading content
Add the following code to the HTML of you webpage.
<center>
<div id="loader"><img src="Loading Image URL"/><p>Loading…</p></div>
</center>
<div id = "hider" style="display:none;">
Slow Loading Content
</div>
<script>
document.getElementById('hider').style.display = 'inline';
document.getElementById('loader').style.display = 'none';
</script>
Replace the Loading Image URL with the URL of your loading image.
Replace the “Slow Loading Content” text with the deploy code of the DataPage(s) or other slow loading content. Depending on the size and complexity of the block of content you would like to mask, this section may be quite long.
Now, when your page content loads completely, the loading bar will automatically toggle off and your content will be displayed.
Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
