[Pro] adding loading spinner to page

mbmomo · May 21, 2014, 4:09pm

Hi FreewayTalkers,
Is there a way to add a loading spinner in the center of a page until all the site is fully load ?

Walt’s tip to set an animated GIF as a background then covered by the image doesn’t apply in my case.

Any idea ?
Many thanks in advance,
monique

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

waltd · May 21, 2014, 4:20pm

You can do this in JavaScript, using the Prototype.js library (which will be easiest if you use the Protaculous2 Action). What I would do is create your spinner layer, set it as the top-most thing in your page, and position it using Fixed in Window and 100% height and width (Flexible). Then apply your background to it (maybe a semi-transparent color and a spinner in the middle as a background image). Then, when the page loads, simply delete that element altogether. The code looks like this:

Event.observe(window, 'load', function(){
	$('your-cover-div-id').hide();
});

Pop that into the DOM Loaded Observer code editor, and preview in a browser. You should see the spinner briefly, and then it will just pop out of existence. If you want something more graceful, then check the Use Scriptaculous Libraries option in Protaculous2. You only need Effects.js, which is the default if you open that interface area. Change the code to read fade in place of remove, so the line is:

$('your-cover-div-id').fade();

Then it will fade away over 1 second and then be removed from the page entirely, just as before.

Walter

On May 21, 2014, at 12:09 PM, mbmomo wrote:

Hi FreewayTalkers,
Is there a way to add a loading spinner in the center of a page until all the site is fully load ?

Walt’s tip to set an animated GIF as a background then covered by the image doesn’t apply in my case.

Any idea ?
Many thanks in advance,
monique

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

jgalicia · May 21, 2014, 6:32pm

is amazing but dont work. i do step by step.

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

David_McCallum · May 21, 2014, 7:07pm

is amazing but dont work. i do step by step.

Can you post a link to your example online somewhere and we can see where you are going wrong.

David

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

ThomasKimmich · May 21, 2014, 9:02pm

… what about a review of your strategies instead of entertaining your audience with:

“Page is loading … please be patient”

Some simple points could be:

Reduce file sizes!
Put stuff if possible behind the fold!
Are the “heavy weight” bandwidth-killers necessary or even be modernized?
What’s the reason for my problems and what happens when this page is loaded on mobile devices?

Stop being web-designers (died Dec 2012) and start entering the world of front-end developers (born some seconds after Dec 2012 or even earlier).

Cheers

The bandwidth terminator

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

jgalicia · May 21, 2014, 9:21pm

I agree T. I like doing the examples to learn

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

mbmomo · May 21, 2014, 9:39pm

I totally and absolutely agree with you T, keep it light, keep it tight, keep it lean. However, until I do succeed in putting my site on a diet, I will follow Walt example.
Thanks a lot Walt and Thomas !

Monique

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

David_McCallum · May 21, 2014, 10:52pm

However, until I do succeed in putting my site on a diet, I will follow Walt example.

We will still need to see an example online if you want help to fix it.

D

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

mbmomo · May 21, 2014, 11:20pm

On 21 May 2014, 4:21 pm, waltd wrote:

You can do this in JavaScript, using the Prototype.js library (which will be easiest if you use the Protaculous2 Action). What I would do is create your spinner layer, set it as the top-most thing in your page, and position it using Fixed in Window and 100% height and width (Flexible). Then apply your background to it (maybe a semi-transparent color and a spinner in the middle as a background image). Then, when the page loads, simply delete that element altogether. The code looks like this:

Event.observe(window, ‘load’, function(){
$(‘your-cover-div-id’).hide();
});

Pop that into the DOM Loaded Observer code editor, and preview in a browser. You should see the spinner briefly, and then it will just pop out of existence. If you want something more graceful, then check the Use Scriptaculous Libraries option in Protaculous2. You only need Effects.js, which is the default if you open that interface area. Change the code to read fade in place of remove, so the line is:

$(‘your-cover-div-id’).fade();

Then it will fade away over 1 second and then be removed from the page entirely, just as before.

Walter

On May 21, 2014, at 12:09 PM, mbmomo wrote:

Hi FreewayTalkers,
Is there a way to add a loading spinner in the center of a page until all the site is fully load ?

Walt’s tip to set an animated GIF as a background then covered by the image doesn’t apply in my case.

Any idea ?
Many thanks in advance,
monique

Tried it,
The spinner will not hide when loading is completed.
Tried it in the Window Loaded Observer.
Still doesn’t hide.
Anything else I should try ?

m

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

mbmomo · May 21, 2014, 11:34pm

http://www.flat-broke.com/

Here is the heavy-weight.

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

waltd · May 22, 2014, 11:25am

Your loader.gif and hint.gif are both marked as missing. Did you upload them? Did they get their names changed somehow so that the page HTML cannot find them? I see that they are expected to be in a sub-folder of the Resources folder – that’s not something that Freeway would do. How are you uploading them?

Walter

On May 21, 2014, at 7:34 PM, mbmomo wrote:

http://www.flat-broke.com/

Here is the heavy-weight.

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

mbmomo · May 22, 2014, 7:13pm

On 22 May 2014, 11:25 am, waltd wrote:

Your loader.gif and hint.gif are both marked as missing. Did you upload them? Did they get their names changed somehow so that the page HTML cannot find them? I see that they are expected to be in a sub-folder of the Resources folder – that’s not something that Freeway would do. How are you uploading them?

Walter

On May 21, 2014, at 7:34 PM, mbmomo wrote:

http://www.flat-broke.com/

Here is the heavy-weight.

I deleted this sub-folder. As for the loader.gif and hint.gif, I see them both living in the Resources folder. Where do I have to look to see they are missing ?

monique

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

waltd · May 22, 2014, 7:20pm

In your browser’s developer tools, you can see missing elements highlighted in red in the left-hand bar when you have focused on the Resources there. (If you haven’t enabled this, in Safari, in the Preferences, select Advanced, then check Show Develop menu.) From the main menu, choose Develop / Show Page Resources.

If you got rid of the folder and moved these images to the root of the Resources folder, then two things.

Did you upload these files to your server? Freeway will not upload anything it didn’t create itself. (There are Actions that allow you to attach random files to your pages so they will be uploaded either alongside the page, or into its Resources folder, but you have to install and configure these to do so. You didn’t mention it, so I am guessing you hadn’t done this particular technique.)
Did you change the reference to these files in your JavaScript? If the script was asking for them in a particular place, it won’t know if you moved them on disk or not.

Walter

On May 22, 2014, at 3:13 PM, mbmomo wrote:

On 22 May 2014, 11:25 am, waltd wrote:

Your loader.gif and hint.gif are both marked as missing. Did you upload them? Did they get their names changed somehow so that the page HTML cannot find them? I see that they are expected to be in a sub-folder of the Resources folder – that’s not something that Freeway would do. How are you uploading them?

Walter

On May 21, 2014, at 7:34 PM, mbmomo wrote:

http://www.flat-broke.com/

Here is the heavy-weight.

I deleted this sub-folder. As for the loader.gif and hint.gif, I see them both living in the Resources folder. Where do I have to look to see they are missing ?

monique

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

ThomasKimmich · May 22, 2014, 8:14pm

… I’m no expert at all if it comes to script, but I am (close to be) pretty sure that the magic zoom stuff is slowing this page down (beneath some other things).

I’d like to see what happens if those relevant script are added “before end body”-Tag.

Furthermore the “spawn new window” is also a candidate to slow down stuff. Unfortunately there is no chance to “manipulate” this.

Cheers

Thomas

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

mbmomo · May 22, 2014, 9:49pm

On 22 May 2014, 7:21 pm, waltd wrote:

In your browser’s developer tools, you can see missing elements highlighted in red in the left-hand bar when you have focused on the Resources there. (If you haven’t enabled this, in Safari, in the Preferences, select Advanced, then check Show Develop menu.) From the main menu, choose Develop / Show Page Resources.

If you got rid of the folder and moved these images to the root of the Resources folder, then two things.

Did you upload these files to your server? Freeway will not upload anything it didn’t create itself. (There are Actions that allow you to attach random files to your pages so they will be uploaded either alongside the page, or into its Resources folder, but you have to install and configure these to do so. You didn’t mention it, so I am guessing you hadn’t done this particular technique.)

Did you change the reference to these files in your JavaScript? If the script was asking for them in a particular place, it won’t know if you moved them on disk or not.

Walter

On May 22, 2014, at 3:13 PM, mbmomo wrote:

On 22 May 2014, 11:25 am, waltd wrote:

Your loader.gif and hint.gif are both marked as missing. Did you upload them? Did they get their names changed somehow so that the page HTML cannot find them? I see that they are expected to be in a sub-folder of the Resources folder – that’s not something that Freeway would do. How are you uploading them?

Walter

On May 21, 2014, at 7:34 PM, mbmomo wrote:

http://www.flat-broke.com/

Here is the heavy-weight.

I deleted this sub-folder. As for the loader.gif and hint.gif, I see them both living in the Resources folder. Where do I have to look to see they are missing ?

monique

Thank you Walt,
Oh it is very nice to look under the hood with Develop/Show Pages Resources and Errors !
Now I am down to only the hint.gif missing. Those 2 items are indeed part of the graphics folder for MagicZoom. I am not concern with MZoom at this moment (Hi Thomas ! I’ll try the “before end body” soon).
This loader.gif is not the one I used for my loading spinner question. I used a custom-made ajax-loader.
It is now well upload to my server and I’ll give it a try starting from a near to clean slate.
monique

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

mbmomo · May 22, 2014, 11:22pm

Am I correct here :

Event.observe(window, ‘load’, function(){
$(‘ajax-loader-3.gif’).hide();
});

monique

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

waltd · May 22, 2014, 11:23pm

Yes. But check to be certain that you are using “straight” quotes, rather than curly ones. It’s critically important.

Walter

On May 22, 2014, at 7:22 PM, mbmomo wrote:

Am I correct here :

Event.observe(window, ‘load’, function(){
$(‘ajax-loader-3.gif’).hide();
});

monique

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

David_McCallum · May 22, 2014, 11:57pm

The script that you have used is

<script id="domloaded" type="text/javascript">
document.observe('dom:loaded', function(evt){
	Event.observe(window, 'load', function(){
	    $('your-cover-div-id').hide();
	});
	
});
</script>

But unless you have actually named the Div that the ajax-loader-3.gif is in as ‘your-cover-div-id’ this isn’t going to work.

Yours is actually called ‘ajaxloader3’ so the correct javascript should be

    <script id="domloaded" type="text/javascript">
    document.observe('dom:loaded', function(evt){
        Event.observe(window, 'load', function(){
            $('ajaxloader3').hide();
        });

    });
    </script>

I also think that you should use a loader gif a bit bigger than 16 x 16 - it just cannot be seen easily at that size.

David

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

David_McCallum · May 23, 2014, 12:22am

The missing hint.gif is because the CSS in the MagicZoom.css file states

/* Style of the hint text and image */
.MagicZoomHint {
    background: url(graphics/hint.gif) no-repeat 2px 50%;
    color: #444;
    font-size: 8pt;
    font-family: sans-serif;
    line-height: 24px;
    margin: 0;
    min-height: 24px;
    padding: 2px 2px 2px 20px !important;
    text-align: left;
    text-decoration: none;
}

So hint.gif should be in the graphics folder. similarly the loader.gif file.

A word of warning here though.

It is bad practice to add anything (folders/subfolders/files) into the FW created Resources folder - unless you are using a FW action to do it.

FW manages the content of the Resources folder and shouldn’t be messed with (unless you know precisely what you are doing).

You would be far better to create a MagicZoom folder where all the associated files (js, css, graphics etc) can live on your server kept separately from the FW generated files in the Resources folder. Then use FTP to upload them.

D

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

mbmomo · May 23, 2014, 3:07pm

On 22 May 2014, 11:57 pm, DeltaDave wrote:

The script that you have used is
But unless you have actually named the Div that the ajax-loader-3.gif is in as ‘your-cover-div-id’ this isn’t going to work.

Yours is actually called ‘ajaxloader3’ so the correct javascript should be
    
I also think that you should use a loader gif a bit bigger than 16 x 16 - it just cannot be seen easily at that size.

David

Still can’t make it work…
I must do something really wrong. The script doesn’t keep into the DOM Loaded Observer code editor. I save it, publish it, upload the site and when I go back in FW the Protaculous2 action is empty.

monique

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