JQuery : Charger la publicité Blogbang en asynchrone

Avec l'arrivée de Google Panda en France, toutes les optimisations sont bonnes à prendre pour réduire le temps de chargement des pages de son site Internet.

Je vous propose dans cet article, de charger la publicité Blogbang de manière asynchrone afin de réduire le temps d'affichage de vos pages Web.

Le javascript proposé se base sur Jquery que vous pouvez directement charger depuis :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 

Placez dans le body de vos pages, à l'endroit où vous souhaitez afficher le pavé publicitaire, un div identifié par "blogbang" :

<div id="blogbang">
<!-- L'endroit oC9 va s'afficher la publicitC) blogbang -->
</div>

Placez dans le header de vos pages le script suivant qui se déclenchera après chargement de la page :

<!-- After document loading -->
<script type="text/javascript">

$( document ).ready( function() {

    // Load the blogbang ads
    var bb = document.createElement('script');
    bb.type = 'text/javascript';
    bb.async = true;
    bb.src = 'http://www.blogbang.com/d.php?id=xx&n=1&p=L&o=H&w=580&c=cccccc&bg=2';
    $('#blogbang')[0].appendChild(bb);
}
</script>

Remplacez les arguments de l'URL avec vos propres paramètres et le tour est joué !

Le bandeau publicitaire Blogbang sera chargée par les navigateurs après que votre page se soit chargée correctement. En cas de ralentissement des serveurs de Blogbang, vos pages s'afficheront toujours aussi rapidement.

''UPDATE 27/10/2011 : Depuis la récente MAJ de blobang, le code présenté ci-dessus ne fonctionne plus malheureusement, et je n'ai pas de solution de contournement.''

---