Experimental support is also provided for slow loading video, audio, and embedded objects. Setup is straightforward; just nest a slow-loading stack in SlowLoader, and it will do the rest for you. SlowLoader can be used in both fixed and responsive page layouts. You can safely use multiple SlowLoader stacks on the same page; making it ideally suited in grid or collage configurations.

Some content like slideshows can be quite-badly broken during page loading, before the CSS or Javascript kicks-in. So SlowLoader provides the option to set a fixed height on loading content, to hide all the ugliness down below! Once the content has loaded, SlowLoader will switch back to an auto-height. Further modifications can be applied to styling, using custom CSS code.

SlowLoader will safely work in instances where Javascript has been disabled in a web browser. Any SlowLoader stacks which are printed or saved as PDF will be devoid of any progress indicators.

Examples

Here are some examples of the SlowLoader stack. These three examples demonstrate a static text indicator, an animated GIF indicator and a retina-enabled Font Awesome icon indicator.
Loading...
SlowLoader is ideal for use with image stacks (local and warehoused images) and slideshows like FreeStyle.

Setup

Follow these steps to apply SlowLoader stacks to your pages:
  • Once installed, drag and drop a SlowLoader stack into your page
  • Drag and drop the 'slow content' into the placeholder shown in edit mode
  • Change any of the settings you want, in the SlowLoader stack settings

The loading indicator can be set to display in front or behind the slow-loading content, using the drop-down menu options provided. You can customise the position of the progress indicator, relative to the top of the stack.

SlowLoader can be configured to start with a fixed-height applied, and then change to an 'auto' height, once loading is complete. This is useful for hiding ugly slideshow loading. Height can be specified in pixels, em's or percentage units of measurement.

Font Awesome Icon indicators are only available to use in ThemeFlood RapidWeaver themes that support Font Awesome icons. To setup, opt to use a text progress indicator, and enter your Font Awesome code in the input box. Animated Font Awesome Icons are supported too!

SlowLoader will not pre-load content or speed up its loading. It will merely display an indicator that the content is still loading. Website users waiting for the content to display are more likely to hang around a few seconds longer, if there's a hint something is coming...

Using SlowLoader with ExtraContent and FreeStyle

Because these plugins work on the basis of moving content from one location in a page to another, you need to ensure that SlowLoader is nested within the moved content. If working with FreeStyle banners, turn off the Embed In FreeStyle option. Instead, put your SlowLoader stack and FreeStyle stack within an ExtraContent stack, and set the ExtraContent stack to embed into the theme banner or header container. This way, both SlowLoader and FreeStyle will remain together, on the page.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.