2021-04-18 10:23:24 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > YBlog - How to preload your site with style< / title >
< meta name = "keywords" content = "web, jQuery, webdesign" / >
< link rel = "shortcut icon" type = "image/x-icon" href = "../../../../Scratch/img/favicon.ico" / >
2021-05-25 20:25:47 +00:00
< link rel = "stylesheet" type = "text/css" href = "/css/y.css" / >
< link rel = "stylesheet" type = "text/css" href = "/css/legacy.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "/rss.xml" / >
2021-04-18 10:23:24 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "apple-touch-icon" href = "../../../../Scratch/img/about/FlatAvatar@2x.png" / >
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
<!-- IndieAuth -->
< link href = "https://twitter.com/yogsototh" rel = "me" >
< link href = "https://github.com/yogsototh" rel = "me" >
< link href = "mailto:yann.esposito@gmail.com" rel = "me" >
< link rel = "pgpkey" href = "../../../../pubkey.txt" >
< / head >
< body lang = "en" class = "article" >
< div id = "content" >
< div id = "header" >
< div id = "choix" >
< span id = "choixlang" >
< a href = "../../../../Scratch/fr/blog/2009-10-How-to-preload-your-site-with-style/" > French< / a >
< / span >
< span class = "tomenu" > < a href = "#navigation" > ↓ Menu ↓< / a > < / span >
< span class = "flush" > < / span >
< / div >
< / div >
< div id = "titre" >
< h1 > How to preload your site with style< / h1 >
< / div >
< div class = "flush" > < / div >
< div id = "afterheader" class = "article" >
< div class = "corps" >
< h2 id = "example" > Example< / h2 >
< p > Here is a live example of what appear while loading my pages.< / p >
< script src = "http://code.jquery.com/jquery-1.12.3.min.js" > < / script >
< div id = "demo" style = "width:45%; position: relative; height: 8em; background: #333; background-position: 50% 50%; color: #fff; text-align: center; padding-top: 1em; margin-left: auto; margin-right: auto; border: solid 10px rgba(255,255,255,0.7); -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; cursor: pointer; " >
< p >
Hello! I’ ve finished loading!
< / p >
< p >
Click me to see me disapear again.
< / p >
< div id = "todisapear" style = "color: #000; position:absolute;top:0;left:0;text-align: center; padding-top: 1em; width: 100%; background-color: #eee; height: 8em;" >
< p > Loading… < img style = "border: none; background-color: none; background: none" src = "../../../../Scratch/img/loading.gif" alt = "loading logo" / > < / p >
< / div >
< script >
function Rabbit(){
$('#todisapear')
.show()
.animate({opacity: 1.0},3000)
.fadeOut();
}
$(document).ready(function(){
$('#todisapear').animate({opacity: 1.0},3000).fadeOut();
$('#demo').click(Rabbit);
});
< / script >
< / div >
< p > I first tried to integrate < a href = "http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/" > queryLoader< / a > , but it didn’ t fill my needs.< / p >
< p > The plugin add a black div to hide all the content. But as the script had to be launched at the end of the source code my website show for a small time.< / p >
< p > In order to hide this small artefact, here is how I do that.< / p >
< h2 id = "code" > Code< / h2 >
< p > In a first time, I added at the top of the body the div hiding all the content.< / p >
< div >
< div class = "sourceCode" id = "cb1" > < pre class = "sourceCode html" > < code class = "sourceCode html" > < a class = "sourceLine" id = "cb1-1" title = "1" > ...< / a >
< a class = "sourceLine" id = "cb1-2" title = "2" > < span class = "kw" > < body> < / span > < / a >
< a class = "sourceLine" id = "cb1-3" title = "3" > < span class = "kw" > < div< / span > < span class = "ot" > id=< / span > < span class = "st" > " blackpage" < / span > < span class = "kw" > > < / span > < / a >
< a class = "sourceLine" id = "cb1-4" title = "4" > content to display during the loading.< / a >
< a class = "sourceLine" id = "cb1-5" title = "5" > < span class = "kw" > < /div> < / span > < / a >
< a class = "sourceLine" id = "cb1-6" title = "6" > ...< / a > < / code > < / pre > < / div >
< / div >
< p > and here is the associated CSS to < code > #blackpage< / code > :< / p >
< div >
< div class = "sourceCode" id = "cb2" > < pre class = "sourceCode css" > < code class = "sourceCode css" > < a class = "sourceLine" id = "cb2-1" title = "1" > < span class = "pp" > #blackpage< / span > < / a >
< a class = "sourceLine" id = "cb2-2" title = "2" > top< span class = "in" > : 0 < / span > < / a >
< a class = "sourceLine" id = "cb2-3" title = "3" > left< span class = "in" > : 0 < / span > < / a >
< a class = "sourceLine" id = "cb2-4" title = "4" > width< span class = "in" > : 100%< / span > < / a >
< a class = "sourceLine" id = "cb2-5" title = "5" > height< span class = "in" > : 100%< / span > < / a >
< a class = "sourceLine" id = "cb2-6" title = "6" > margin-left< span class = "in" > : 0< / span > < / a >
< a class = "sourceLine" id = "cb2-7" title = "7" > margin-right< span class = "in" > : 0< / span > < / a >
< a class = "sourceLine" id = "cb2-8" title = "8" > margin-top< span class = "in" > : 0< / span > < / a >
< a class = "sourceLine" id = "cb2-9" title = "9" > margin-bottom< span class = "in" > : 0< / span > < / a >
< a class = "sourceLine" id = "cb2-10" title = "10" > position< span class = "in" > : absolute< / span > < / a >
< a class = "sourceLine" id = "cb2-11" title = "11" > text-align< span class = "in" > : center< / span > < / a >
< a class = "sourceLine" id = "cb2-12" title = "12" > color< span class = "in" > : #666< / span > < / a >
< a class = "sourceLine" id = "cb2-13" title = "13" > padding-top< span class = "in" > : 10em< / span > < / a >
< a class = "sourceLine" id = "cb2-14" title = "14" > background-color< span class = "in" > : #eee< / span > < / a >
< a class = "sourceLine" id = "cb2-15" title = "15" > z-index< span class = "in" > : 9000< / span > < / a > < / code > < / pre > < / div >
< / div >
< p > and the associated jQuery code:< / p >
< div >
< div class = "sourceCode" id = "cb3" > < pre class = "sourceCode javascript" > < code class = "sourceCode javascript" > < a class = "sourceLine" id = "cb3-1" title = "1" > < span class = "at" > $< / span > (document).< span class = "at" > ready< / span > (< span class = "kw" > function< / span > ()< span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb3-2" title = "2" > < span class = "at" > $< / span > (< span class = "st" > '#blackpage'< / span > ).< span class = "at" > fadeOut< / span > ()< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb3-3" title = "3" > < span class = "op" > }< / span > )< span class = "op" > ;< / span > < / a > < / code > < / pre > < / div >
< / div >
< p > Yes, it is as simple as that. And, putting the < code > #blackpage< / code > div at the top of my page, I ensure to hide anything while loading.< / p >
< p > I hope it had helped you!< / p >
< / div >
< div id = "afterarticle" >
< div id = "social" >
2021-05-25 20:25:47 +00:00
< a href = "/rss.xml" target = "_blank" rel = "noopener noreferrer nofollow" class = "social" > RSS< / a >
2021-04-18 10:23:24 +00:00
·
< a href = "https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2009-10-How-to-preload-your-site-with-style/%20via%20@yogsototh" target = "_blank" rel = "noopener noreferrer nofollow" class = "social" > Tweet< / a >
·
< a href = "http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2009-10-How-to-preload-your-site-with-style/" target = "_blank" rel = "noopener noreferrer nofollow" class = "social" > FB< / a >
< br / >
< a class = "message" href = "../../../../Scratch/en/blog/Social-link-the-right-way/" > These social sharing links preserve your privacy< / a >
< / div >
< div id = "navigation" >
< a href = "../../../../" > Home< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/blog" > Blog< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/softwares" > Softwares< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/about" > About< / a >
< / div >
< div id = "totop" > < a href = "#header" > ↑ Top ↑< / a > < / div >
< div id = "bottom" >
< div >
Published on 2009-10-03
< / div >
< div >
< a href = "https://twitter.com/yogsototh" > Follow @yogsototh< / a >
< / div >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by/3.0/deed.en_US" > Yann Esposito©< / a >
< / div >
< div >
Done with
< a href = "http://www.vim.org" target = "_blank" rel = "noopener noreferrer nofollow" > < strike > Vim< / strike > < / a >
< a href = "http://spacemacs.org" target = "_blank" rel = "noopener noreferrer nofollow" > spacemacs< / a >
< span class = "pala" > & < / span >
< a href = "http://nanoc.ws" target = "_blank" rel = "noopener noreferrer nofollow" > < strike > nanoc< / strike > < / a >
< a href = "http://jaspervdj.be/hakyll" target = "_blank" rel = "noopener noreferrer nofollow" > Hakyll< / a >
< / div >
< hr / >
< div style = "max-width: 100%" >
< a href = "https://cardanohub.org" >
< img src = "../../../../Scratch/img/ada-logo.png" class = "simple" style = "height: 16px ;
border-radius: 50%;
vertical-align:middle;
display:inline-block;" />
ADA:
< / a >
< code style = "display:inline-block;
word-wrap:break-word;
text-align: left;
vertical-align: top;
max-width: 85%;">
DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp
< / code >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< / html >