2010-08-23 12:26:48 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "keywords" content = "web, jQuery, webdesign" >
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "Charger une page web avec style" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2009-10-How-to-preload-your-site-with-style/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "How to preload your site with style" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2009-10-How-to-preload-your-site-with-style/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
< title > Charger une page web avec style< / title >
< / head >
< body lang = "fr" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
2010-09-27 18:49:15 +00:00
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
< a href = "/Scratch/en/blog/2009-10-How-to-preload-your-site-with-style/" onclick = "setLanguage('en')" > in English< / a >
< / div >
< / div >
< img src = "/Scratch/img/presentation.png" alt = "Presentation drawing" / >
2010-08-23 12:26:48 +00:00
< div id = "titre" >
< h1 >
Charger une page web avec style
< / h1 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< h2 class = "first" id = "exemple" > Exemple< / h2 >
< p > Voici comment apparaissent mes pages pendant leur chargement.< / p >
< div id = "demo" style = "width:45%; position: relative; height: 8em; background-image: url('/Scratch/css/img/red.jpg'); 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 > Voilà ! Je suis chargée !< / p >
< p > Cliquez-moi dessus pour recommencer.< / 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;" >
Loading...
< img alt = "loading logo" src = "/Scratch/img/loading.gif" style = "border: none; background-color: none; background: none" / >
< / 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 > J’ ai d’ abord essayé d’ intégrer < a href = "http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/" > queryLoader< / a > , mais il ne comblait pas mes besoins.< / p >
< p > Ce plugin ajoutait un ‘ div’ noir pour cacher le contenu du site. Cependant, comme le script doit être lancé à la fin du code source. Pendant un petit moment, on peut voir mon site en train de se mettre à jour.< / p >
< p > Pour cacher ce petit ‘ artefact’ , voici comment je m’ y suis pris.< / p >
< h2 id = "code" > Code< / h2 >
< p > D’ abort il faut ajouter tout en haut du body cette fois un div qui va être le voile noir qui va tout cacher.< / p >
< div >
< pre class = "twilight" >
...
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > body< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > id< / span > < span class = "MetaTagAll" > =< / span > < span class = "String" > < span class = "String" > " < / span > < span class = "String" > blackpage< / span > < span class = "String" > " < / span > < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span >
content to display during the loading.
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > > < / span > < / span >
...
< / pre >
< / div >
< p > et le CSS correspondant au div < code > #blackpage< / code > : < / p >
< div >
< pre class = "twilight" >
< span class = "CssId" > < span class = "CssId" > #< / span > blackpage< / span >
top: 0
left: 0
width: 100%
height: 100%
margin-left: 0
margin-right: 0
margin-top: 0
margin-bottom: 0
position: absolute
text-align: center
color: #666
padding-top: 10em
background-color: < span class = "CssId" > < span class = "CssId" > #< / span > eee< / span >
z-index: 9000
< / pre >
< / div >
< p > ainsi que le code jQuery associé : < / p >
< div >
< pre class = "twilight" >
< span class = "Keyword" > $< / span > (< span class = "Support" > document< / span > ).ready(< span class = "Storage" > function< / span > (){
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #blackpage< span class = "String" > '< / span > < / span > ).fadeOut();
});
< / pre >
< / div >
< p > Oui, c’ est aussi simple que ça. Maintenant ajouter le < code > #blackpage< / code > tout en haut de ma page me permet d’ être certain de tout cacher pendant le chargement de la page.< / p >
< p > J’ espère que ça a pu vous être utile !< / p >
< / div >
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomfr" >
s'abonner
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('< div id = "clickcomment" > Commentaires< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > commentaires< / h2 >
< noscript >
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
var idcomments_post_id = '/Scratch/fr/blog/2009-10-How-to-preload-your-site-with-style/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/2009-10-How-to-preload-your-site-with-style/';
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2010-09-17 15:15:29 +00:00
< ul > < li > < a href = "/Scratch/fr/" > Accueil< / a > < / li >
2010-08-23 12:26:48 +00:00
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li >
< li > < a href = "/Scratch/fr/contact/" > Contact< / a > < / li > < / ul >
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
articles précédents
< div class = "previous_article" >
< a href = "/Scratch/fr/blog/2009-09-Disqus-versus-Intense-Debate--Why-I-switched-/" > ← Disqus contre Intense Debate (pourquois j'ai changé)< / a >
< / div >
< div class = "previous_article" >
< a href = "/Scratch/fr/blog/2009-09-jQuery-Tag-Cloud/" > ← jQuery Tag Cloud [en]< / a >
< / div >
< div class = "previous_article" >
< a href = "/Scratch/fr/blog/2009-09-replace-all-except-some-part/" > ← Remplacer tout sauf une partie< / a >
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< div class = "next_article" >
< a href = "/Scratch/fr/blog/2009-10-untaught-git-usage/" > Usages non dits de Git→ < / a >
< / div >
< div class = "next_article" >
< a href = "/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/" > < em > Focus< / em > > Minimalisme→ < / a >
< / div >
< div class = "next_article" >
< a href = "/Scratch/fr/blog/2009-10-launch-daemon-from-command-line/" > lancer un démon en ligne de commande→ < / a >
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/deed.fr" > Droits de reproduction ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
2010-08-31 13:06:43 +00:00
Écrit le : 03/10/2009
2010-09-02 09:51:46 +00:00
modifié le : 17/06/2010
2010-08-23 12:26:48 +00:00
< / div >
< div >
Site entièrement réalisé avec
< a href = "http://www.vim.org" > Vim< / a >
et
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< div >
< a href = "/Scratch/fr/validation/" > Validation< / a >
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml" > [rss]< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >
