Lazy Load Reddit Widgets

Question

J'essaye d'asynchroniser (ou de charger paresseusement) ce widget Reddit, mais j'ai un problème.

est ici le code de base qui fonctionne parfaitement lorsqu'il est directement dans le code HTML:

<script src="http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&amp;t=all&amp;sort=new&amp;style=off" type="text/javascript"></script> 

Si je tente de déplacer que sur dans mon scripts.js où j'exécute d'autres choses jQuery, il finit par réécrire l'ensemble du DOM avec le widget. Je suis conscient que le chargement que src dans le navigateur montre le code qui est en cours d'exécution commence par document.write. Donc, je devine, car il perd un point de référence, il est en train d'écraser toute la fenêtre.

Voici les deux méthodes que j'avais essayé et échoué:

$('.redditdiv').html('<script src="http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&amp;t=all&amp;sort=new&amp;style=off" type="text/javascript"></script>'); 

L'autre tentative a échoué:

var redditscript = document.createElement('SCRIPT'); 
redditscript.type = 'text/javascript'; 
redditscript.async = true; 
redditscript.src = 'http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&t=all&sort=new&style=off'; 
$('.redditdiv').append(redditscript); 

Si quelqu'un a une suggestion, ce serait tout à fait impressionnant. Merci!

P.S. Question Bonus: Quelqu'un at-il une suggestion pour ce widget Twitter aussi?

<script src="http://widgets.twimg.com/j/2/widget.js"></script> 
<script> 
new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 6000,width: 'auto',height: 300, theme: {shell: {background: '#ffffff',color: '#000000'},tweets: {background: '#ffffff',color: '#606060',links: '#4476cc'} }, features: {scrollbar: false,loop: false,live: false,hashtags: false,timestamp: true,avatars: false,behavior: 'all'} }).render().setUser('skattertech').start(); 
</script> 

Answer 1

Adapter le script de la question mentionnée par Matthew Flaschen, nous pouvons utiliser quelque chose comme ceci:

var content = ''; 
document.write = function(s) { 
    content += s; 
}; 

$.getScript('http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&t=all&sort=new&style=off', function(){ 
    $('body').append(content); 
}); 

Nous utilisons la fonction $.getScript, qui est spécialement conçu pour charger dynamiquement des scripts. Le deuxième paramètre est le callback chargé, donc la fonction passée à la fonction sera exécutée sur load.

Vous devez remplacer le sélecteur 'body' par l'élément dont vous avez besoin. Sinon, si vous n'avez pas besoin jQuery,

var s = document.createElement('script'), 
    content = ''; 

s.src = 'http://www.reddit.com/domain/skattertech.com/new/.embed?limit=4&t=all&sort=new&style=off'; 

document.write = function(s) { 
    content += s; 
}; 

s.onload = function(){ 
    document.getElementById('reddit').innerHTML = content; 
}; 

document.getElementsByTagName('head')[0].appendChild(s); 

Voir: http://jsfiddle.net/8yg9x/ pour la version jQuery et http://jsfiddle.net/d95xh/ pour la plaine la version Javascript

Answer 2

Vous pouvez utiliser

<script src='//redditjs.com/subreddit.js'></script> 

ou si vous vouliez utiliser plus d'options. Les détails des options peuvent être trouvés here.

<script src='//redditjs.com/subreddit.js' data-subreddit='aww' data-height='400' data-width='330' data-sort='hot' data-theme='dark' data-subreddit-mode='small' ></script> 

Le résultat final ressemblera à ceci.

http://i.imgur.com/YczjBJD.png