Loading progress bar

Is it possible in Showcase or Freeway to have a progress bar displayed while large images are loading?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not a real progress bar, one that accurately or even roughly shows how much file is remaining to download. But you can put a spinner or barber-pole “indeterminate wait” style loading image in the page using CSS. What I do is set that animated GIF as a background for the image that’s loading, and as the image loads in, it covers the background, so it cuts out automatically.

If you can post a link to your page, I can offer a better guess at the CSS you’d need.

Walter

On Jun 14, 2012, at 2:48 PM, Ian Burden wrote:

Is it possible in Showcase or Freeway to have a progress bar displayed while large images are loading?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter. I’m not sure that an “indeterminate wait” indicator helps the user much. I’m still developing my web page (I’m new at this) but you’re more than welcome to take a look. My page is http://ianburden.com/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Find a loading animation image you like, and add it to the Resources folder on your server. Then add this code to the Page / HTML Markup dialog, in the Before /HEAD section:

<style type="text/css">
#fwShowcase {
	background-image: url(Resources/spinner.gif) !important;
	background-position: center center;
	background-repeat: no-repeat;
}
</style>

Assuming that your animated image is named spinner.gif, and assuming that it’s in the Resources folder relative to your page, you should see a spinning image as the large image is downloaded, which will then be covered by the image itself.

Another thing that can help in this sort of case is to use massive compression on the large images, so that they just don’t take very long to load.

Walter

On Jun 14, 2012, at 3:00 PM, Ian Burden wrote:

Thanks Walter. I’m not sure that an “indeterminate wait” indicator helps the user much. I’m still developing my web page (I’m new at this) but you’re more than welcome to take a look. My page is http://ianburden.com/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Assuming that your animated image is named spinner.gif, and assuming that it’s in the Resources folder relative to your page, you should see a spinning image as the large image is downloaded, which will then be covered by the image itself.

Thanks very much Walter. Would this also work in conjunction with a Showcase slide show - so I could display the spinner as the slide show is loading?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That CSS was for the Showcase slide show on the page you linked to. If you mean adding this to the main box while the slideshow thumbnails are loading in, it would probably mean a different CSS selector, but the basic premise would be the same. I can imagine a situation where the thumbnails don’t cover the spinner, though, so you’d have to test this and be sure that the background image was covered when the thumbs were there.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you mean adding this to the main box while the slideshow thumbnails are loading in…

No, I didn’t mean that. I had misunderstood your earlier post and did not realize it was intended for the Showcase slide show.

I’ll give it a try. Many thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options