Ah, I see.
In the resizing script there are 2 places where the visibility=“visible” has to be set:
- once in the end of the function ts( trgt,inc ),
- once in the end of the function reSize(size).
function ts( trgt,inc ) {
...
...
//alert ("aaa:"+startSz);
document.body.style.visibility="visible";
}
function reSize(size) {
// alert(size);
setCookie("fontSizerCookie", size, 7);
startSz = getCookie("fontSizerCookie");
if (startSz == 2) {
document.body.style.visibility="visible";
return;
}
ts( 'body',startSz );
}
Then it will work with the onload and setting of the visibility=“hidden” just after the <body> tag:
<body onLoad="reSize(startSz);" class="single single-post postid-1 single-format-standard">
<script type="text/javascript">
document.body.style.visibility="hidden";
</script>
... rest of the page
Now you see a white background during the waiting time, and then a rather flashing page content.
=======
Beautifying!
- First you can give the html the background-color of the page instead of white.
That can be done in the small style block in the head (or in the custom stylesheet):
html { background: #84828C; }
- Then there can be made a soft transition when the page is ready with the hidden rendering in the background.
That can be done by adding in the script (in both places): first a display=“none” to hide the content in an other way, and then a jQuery-function which is giving the content more and more opacity:
function ts( trgt,inc ) {
...
...
//alert ("aaa:"+startSz);
document.body.style.visibility="visible";
document.body.style.display="none";
$( ".single" ).fadeIn(2000);
}
function reSize(size) {
// alert(size);
setCookie("fontSizerCookie", size, 7);
startSz = getCookie("fontSizerCookie");
if (startSz == 2) {
document.body.style.visibility="visible";
document.body.style.display="none";
$( ".single" ).fadeIn(2000);
return;
}
ts( 'body',startSz );
}
The class=“single” is one of the classes of the <body>, so everything in the body will appear simultaneously. 
- Another thing to beautify is the hash-tag # appearing in the URL in the browser bar after a font-size change.
This can be done by adding return false (= don’t go to the href=“#”) in the script-call of the 5 font-changing links:
<a href="#" id="A0" onClick="javascript:reSize(0);return false" ><img ... etc. /></a>
<a href="#" id="A1" onClick="javascript:ts('body',1);return false" title="caratteri piccoli"><img ... etc. /></a>
<a href="#" id="A2" onClick="javascript:ts('body',2);return false" title="caratteri normali"><img ... etc. /></a>
<a href="#" id="A3" onClick="javascript:ts('body',3);return false" title="grandi caratteri "><img ... etc. /></a>
<a href="#" id="A4"onClick="javascript:ts('body',4);return false" title="i più grandi caratteri "><img ... etc. /></a>
- The Chrome Developer Tool is alerting about a “404 - file not found”.
That is the file: [U]http://gleonardonline.com/wordpress/wp-content/themes/blinker/jquery.min.map[/U].
This file is not directly called in the html, but is called by another javascript file: [U]http://gleonardonline.com/wordpress/wp-content/themes/blinker/jquery.js?ver=3.8[/U]
Every not found file can cause a delay in the page load!
Now I’ve read on [U]http://stackoverflow.com/questions/18487596/error-jquery-2-0-2-min-map-not-found[/U] (in post #25):
[INDENT]“The map file is not required for users to run jQuery, it just improves the developer’s debugger experience.”[/INDENT]
Aha!
- So I downloaded your jquery.js file.
- I deleted line 2 with the reference to the not existing jquery.min.map
- Uploaded it to my server.
- And changed the path to jquery.js?ver=3.8 in the html towards the uploaded file on my server.
You can download this one [U]scripts/blinker-jquery.js?ver=3.8[/U], rename it and upload it to your server, replacing the old one.
=======
The result
After this, we have got:
- Test: [U]blinker-nw-2.htm[/U]
The page is calmly fading in from the background.
Choosing a new font-size gives the same fade-in.
And possible to go the another page (1 made 1, link in the testpage), so you can switch and see the cookie is working.
Blinking is over!
BTW: I think your server is pretty slow, the 18 http-requests and a total page weight of 206.9K is not very much. Or is Wordpress doing things behind the scenes with the javascripts?
