Preloader (CSS Spinner) and SSI script II

It takes a time, when I load a shop into an iFrame.
I found some sweet CSS - spinners (on cssload.net) and I'm pondering how to display them.
(Already spent 2 days with it :-))

Options are:
1. integrate CSS and Javascript into the mother page.
2. into the loading page.

In my case the mother page is quite fast loading. The shop: slower (2secs).
It makes no sense to integrate the pre-loader spinner into the loading site, I tried that.
So, in the article loading my iframe, we are.


My problem:
the spinner must stop spinning once the site has loaded and somehow he just don't get it, no matter what I try!
Is it due to the SSI script code in the head?

My code to stop the spinner spinning after the completed page load is:

Code:

---

var pre-loader=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{pre-loader.style.display = 'none';})

---

or (tried both, makes no difference):

Code:

---

var overlay=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{pre-loader.style.display = 'none';})

---

Why is it giving me the finger?

I can't test anything from mobile but try without the dash in the variable name (you can't have dashes in JavaScript variables because it gets mistaken for a minus);

Code:

---

var preLoader=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{preLoader.style.display = 'none';})

---

Or the correct variable name;

Code:

---

var overlay=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{overlay.style.display = 'none';})

---

Doesn't work either, but thank you.
I still need something to switch the spinner of once the shop has loaded into my iframe.

I also tried:

Code:

---

$('#preloader').show();

---

before and after

Code:

---

$('#preloader').hide();

---

the content.

Maybe I'm addressing the wrong page? The spinners markup sits before the iframe of course.
I also tried to write it inside the SSI II script itself, but it stopped functioning after that :-)

OK, I was just looking at your page, and there is no pre-loader and no preloader element. Not on the top page, nor on the first page one can load into the iframe.

I had a lil bug in my HTML in the article, just before the iframe. Sorry.
I switched it on again. Normally the style is set to display: none;
Ah, yes, pls click on "introductory titles" on the first menu button: this will load the iframe page.

OK, here's the problem - still no element with the id of preloader. There is however this (look very carefully at the quote marks):

Code:

---

<div id=“preloader” style="opacity: 0.7">

---

Those are stylized leaning left and leaning right opening and closing double quotes, not the standard vertical double quotes, so the id is actually:

“preloader”

not:

preloader

Things will get much simpler if you correct the HTML markup to:

Code:

---

<div id="preloader" style="opacity: 0.7">

---

Then, this should work:

Code:

---

var overlay=document.getElementById('preloader');
window.addEventListener('load', function()
{overlay.style.display = 'none';})

---

Never use the left and right leaning single or double quotes in either HTML or javascript code unless you mean them as string literals.

NOTEs: I see that you also made the same error in your javascript code:

Code:

---

var pre-loader=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{pre-loader.style.display = 'none';})

---

So be sure to be careful there as well when fixing this.

Also this (once fixed) will make the preloader disappear on load of the top page. After that, if you plan on bringing it back for the loading of each subsequent sub-page into the iframe, you will have to key off of the load event of the iframe or of its document for making it disappear again. But, since I have no firm indication you're even contemplating doing that yet. I'll leave the details of that till later, if needed.

Thanks for the try, John :-)

1. The thing in my HTML markup was the bug I had. I don't understand why you still saw it, but I have a long list of what I don't understand everyday, so ..
2. I put the javascript (of your repaired version, only with "preloader" instead of pre-loader, because I've changed it's ID too) just before the SSI script in my theme.php (I tried also adding it in the body -- the same.)
3. In my HTML markup, I set the style to: display: none; that's the idea.

Preloader does not show.

So all fixed?

No, the preloader does not show before the page loading.
Quick-check yourself.

You still have the same problem, and a new one. Here's the markup:

HTML Code:

---

<div id=“preloader” style="display: none; opacity: 0.7;">

---

New problem - With it's display set to none right in the tag, it will never show unless you do something in javascript or overriding style to change that.

Old problem - it's id still isn't preloader, you still have those messed up word processing quotes around it instead of valid HTML quotes delimiting the id.

It should be:

HTML Code:

---

<div id="preloader" style="opacity: 0.7;">

---

See the difference?

On the plus side, your javascript:

Code:

---

var overlay=document.getElementById('preloader');
window.addEventListener('load', function()
{overlay.style.display = 'none';})

---

No longer has that problem, however, I see an omission I missed before - the addEventListener function expects a third parameter (true or false):

Code:

---

var overlay=document.getElementById('preloader');
window.addEventListener('load', function()
{overlay.style.display = 'none';}, false);

---

I'm not certain if that matters, but I've never seen it without that. Using false is usually fine and what is most customary. I believe it governs whether or not the event can 'bubble' (or in modern parlance 'propagate'), counterintuitively false means it can, which is normal and preferable as it allows other events of the same type on the same object/element to also fire.

Further, even if everything else was right, you cannot set the variable overlay at that point because the element, even with the correct id hasn't been parsed yet. So do it like so:

Code:

---

window.addEventListener('load', function(){
        var overlay = document.getElementById('preloader');
        overlay.style.display = 'none';
}, false);

---

I'd just go direct at that point though:

Code:

---

window.addEventListener('load', function(){
        document.getElementById('preloader').style.display = 'none';
}, false);

---

Either way, once the window loads the element will have been parsed, so everything should then be fine (assuming I understand what you're trying to do*).

Good luck!


*You do want it to show initially and then disappear when the page loads - right?