2011-04-20 12:29:01 +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 = "disqus, web, javascript, intense debate, commentaires" >
2011-04-20 13:56:52 +00:00
< 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" / >
2012-04-02 21:43:39 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/solarized.css" / >
2011-04-20 13:56:52 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
2011-04-20 12:29:01 +00:00
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
2011-04-20 13:56:52 +00:00
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "Load Disqus Asynchronously [en]" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/11_Load_Disqus_Asynchronously/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "Load Disqus Asynchronously" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/11_Load_Disqus_Asynchronously/" / >
< 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 >
2011-04-20 12:29:01 +00:00
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
< title > Load Disqus Asynchronously [en]< / title >
< / head >
2011-10-18 22:30:00 +00:00
< body lang = "fr" class = "article" >
2011-04-20 12:29:01 +00:00
< script type = "text/javascript" > / / < ! [ C D A T A [
2011-04-20 13:56:52 +00:00
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
2011-04-20 12:29:01 +00:00
// ]]>
< / script >
< div id = "content" >
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/11_Load_Disqus_Asynchronously/" onclick = "setLanguage('en')" > in English< / a >
2011-04-20 12:29:01 +00:00
< / div >
2011-09-28 16:05:55 +00:00
< div class = "flush" > < / div >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "titre" >
< h1 >
Load Disqus Asynchronously [en]
< / h1 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< h1 class = "first" id = "update" > Update< / h1 >
< p > In fact this method works for old threads. But it fails to create new post threads. This is why I tried and be conquered by < a href = "http://intensedebate.com" > intensedebate< / a > , as you can see in the bottom of this page.< / p >
2012-02-20 14:41:09 +00:00
< p > Remark I didn’ t have any comment on my blog when I switched. Therefore my lack of influence was a good thing :-).< / p >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "corps" >
< p > Before begining, I must state that I < strong > love< / strong > Disqus. < / p >
< p > I know there is a similar blog entry at < a href = "http://trephine.org/t/index.php?title=Site_improvements_-_fighting_with_Disqus" > Trephine.org< / a > . Here I just add a straight and easy way to load disqus asynchronously using jQuery. < / p >
< p > I also know there is a jQuery plugin to make just that. Unfortunately I had some issue with CSS.< / p >
2012-02-20 14:41:09 +00:00
< p > < em > Now let’ s begin.< / em > < / p >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "corps" >
< h1 class = "first" id = "why" > Why?< / h1 >
< p > Why should I want to load the disqus javascript asynchronously?< / p >
< ul >
2012-02-20 14:41:09 +00:00
< li > Efficiency: I don’ t want my page to wait the complete execution of disqus script to load.< / li >
2011-04-20 12:29:01 +00:00
< li > More independance: when disqus is down, my page is blocked!< / li >
< / ul >
< / div >
< div class = "corps" >
< h1 class = "first" id = "how" > How?< / h1 >
2012-02-20 14:41:09 +00:00
< p > I give a solution with jQuery, but I’ m certain it will work with many other js library.< / p >
2011-04-20 12:29:01 +00:00
< h3 id = "javascript" > Javascript< / h3 >
< p > replace:< / p >
< div >
< pre class = "twilight" >
< span class = "Keyword" > < < / span > script type< span class = "Keyword" > =< / span > < span class = "String" > < span class = "String" > " < / span > text/javascript< span class = "String" > " < / span > < / span > src< span class = "Keyword" > =< / span > < span class = "String" > < span class = "String" > " < / span > http://disqus.com/forums/YOUR_DISQUS_ID/embed.js< span class = "String" > " < / span > < / span > < span class = "Keyword" > > < / span > < span class = "Keyword" > < < / span > /script< span class = "Keyword" > > < / span >
< / pre >
< / div >
< p > by< / p >
< div >
< pre class = "twilight" >
< span class = "Support" > window< / span > .disqus_no_style< span class = "Keyword" > =< / span > < span class = "Constant" > true< / span > ;
< span class = "Keyword" > $< / span > (< span class = "Support" > document< / span > ).ready(< span class = "Storage" > function< / span > (){
< span class = "Keyword" > $< / span > .getScript(< span class = "String" > < span class = "String" > " < / span > http://disqus.com/forums/YOUR_DISQUS_ID/embed.js< span class = "String" > " < / span > < / span > );
});
< / pre >
< / div >
< p > If you forget the < code > window.disqus_no_style=true;< / code > then your page will be blank. Simply because without this option, the javascript use a < code > document.write< / code > action after the document was closed, which cause a complete erasing of it.< / p >
< h3 id = "css" > CSS< / h3 >
2011-04-20 14:52:33 +00:00
< p > But with this option you still need to provide a CSS. This is why you have to copy the css code from the < code > embed.js< / code > file and rewrite it in a CSS file. You can < a href = "/Scratch/en/blog/11_Load_Disqus_Asynchronously/code/original_disqus.css" > download the CSS< / a > I obtained.< / p >
2011-04-20 12:29:01 +00:00
< hr / >
2012-02-20 14:41:09 +00:00
< p > Now it’ s done. I believe all should be fine but I just finished the manip for my own site only 1 hour ago. Therefore there should be some error, tell me if it is the case.< / p >
2011-04-20 12:29:01 +00:00
< / 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 >
Vous devez activer javascript pour commenter.
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
2011-04-20 13:56:52 +00:00
var idcomments_post_id = '/Scratch/fr/blog/11_Load_Disqus_Asynchronously/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/11_Load_Disqus_Asynchronously/';
2011-04-20 12:29:01 +00:00
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
2011-04-20 13:56:52 +00:00
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2011-04-20 13:56:52 +00:00
< ul > < li > < a href = "/Scratch/fr/" > Bienvenue< / a > < / li >
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
< li > < a href = "/Scratch/fr/softwares/" > Softwares< / a > < / li >
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li > < / ul >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
articles précédents
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/10_Synchronize_Custom_WebSite_with_mobileMe/" > < span class = "nicer" > «< / span > Héberger son site personnel sur le site mobileMe< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/09_Why_I_didn-t_keep_whosamung-us/" > < span class = "nicer" > «< / span > Pourquoi je n'ai pas conservé whos.amung.us< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/08_Configure_ssh_to_listen_the_port_443_on_Snow_Leopard/" > < span class = "nicer" > «< / span > ssh sur le port 443 avec Snow Leopard< / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-09-replace-all-except-some-part/" > Remplacer tout sauf une partie < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-09-jQuery-Tag-Cloud/" > jQuery Tag Cloud [en] < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-09-Disqus-versus-Intense-Debate--Why-I-switched-/" > Disqus contre Intense Debate (pourquois j'ai changé) < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
2012-04-02 21:43:39 +00:00
< div >
< a href = "http://twitter.com/yogsototh" > Suivez-moi< / a >
< / div >
2011-04-20 12:29:01 +00:00
< 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" >
Écrit le : 17/09/2009
2011-04-20 13:09:17 +00:00
modifié le : 20/04/2011
2011-04-20 12:29:01 +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 >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >
