Hiding data references

In some browsers, loading pages over a slow connection can result in the user briefly seeing the unprocessed regions and data references on the page before the document's onload notification is sent. To hide unprocessed regions and data references, you can provide a CSS rule for the SpryHiddenRegion class:

<style type="text/css">.SpryHiddenRegion
{visibility:hidden;}
</style>
...
<div spry:region="dsEmployees" class="SpryHiddenRegion">
...
</div>

Using this technique, the CSS rule hides the Spry regions marked with this class when the page loads. When the Spry data is finished processing, Spry strips off the SpryHiddenRegion class and the finished Spry content appears.

An alternative way to hide just the data references, as opposed to the whole tag, is to use the spry:content attribute as a substitute for a data reference. Because the data reference is the value of the spry:content attribute, it is not visible when the page loads.

The following example hides a data reference with a spry:content attribute on an element:

<!--Example of a normal region.-->
<div spry:region="dsEmployees">
Hello my name is {firstname}.
</div>
<!--Example of a region using spry:content.-->
Hello my name is <span spry:content="{firstname}"></span>.
</div>

The spry:content attribute replaces the entire contents of the div tag with the value of the attribute. In this case, the the value of {firstname} is inserted into the empty span tag. The result is the same, only in this case there is no visible data reference.