Preloader (CSS Spinner) and SSI script II

[wol4]

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

No, it should always be hidden, like a cosmic joke :-)

I repaired the bug in my markup immediately when you told me about it -- some hours ago!
I don't know, why you still see it. Pls clear the browsers cache, and again: I'm sorry.

It's (for some time): <div id="preloader" style="display: none; opacity: 0.7;">
...
</div>

If I erase style="display: none", the CSS animation shows, and the idea of this little script
(got it from a tutorial of an Indian developer that I found in YouTube) is to control the hide/show of the id "preloader" with Javascript.

I use this (your) code (at the moment, in the head, before the SSI-script):

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

Nothing happens, and I believe I have been careful.

Maybe it's because of the SSI-II-script.
Maybe this page get's loaded superfast anyway, and we don't know anything here about the shop-CMS that's loading boringly slow.
Maybe it's in vain.
Maybe it would only work if it would be included in the SSI-II script.

[jscheuer1]

OK all fixed that I can see now except:

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

Gotta get rid of that (highlighted), or we will never see it.

[wol4]

I've done that, but now we always see it :-)

The idea of that code is to switch it on and off at pageload. It doesn't.
Maybe it has to be inside of the SSI II - script?

[wol4]

I understand. Thank you, John, for having a close look at this!
Maybe I'll have to talk to the YooThemes ...

[jscheuer1]

OK, I've got it. The onload is firing. The script tag is invalid:

<script type="javascript">
window.addEventListener('load', function(){
	document.getElementById('preloader').style.display = 'none';
}, false);
</script>

Should be:

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

The page does have other invalid code though, illegal nesting should probably be fixed, the outdated attributes on the iframe are probably harmless, and might actually be good for some browsers. Missing alt attributes on images are also optional fixes, as an empty alt attribute is valid. Those are mostly for people with screen readers (blind). So it's nice to have them. And they can be useful if an image fails to load.

[wol4]

Yeah!

[jscheuer1]

OK, now what would be nice would be to have it reappear when a link is clicked that loads new content into the iframe and then have it disappear again once that content is loaded. Compared to what we've just been through, this should be relatively easy. Are you game?

[wol4]

Playful you :-)
It's cool for now, and I will focus on technical issues now.

But it's so important to have a little fun while working on the heavvy stuff, right?
Thank you, I'll be back!

And this is a very honorable address ... :-)