Question

我正在尝试异步（或延迟加载）这个Reddit小部件，但我遇到了问题。

这是直接在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>

如果我尝试将其移动到我执行其他jQuery内容的scripts.js中，它最终会使用小部件重写整个DOM。我知道在浏览器中加载src会显示正在执行的代码以document.write开头。所以我猜测因为它丢失了一个参考点，它会覆盖整个窗口。

以下是我尝试和失败的两种方法：

$('.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>');

另一次尝试失败：

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&amp;t=all&amp;sort=new&amp;style=off';
$('.redditdiv').append(redditscript);

如果有人有任何建议，那将是非常棒的。谢谢！

P.S。奖金问题：是否有人对此Twitter小工具有建议？

<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

根据Matthew Flaschen提到的问题调整脚本，我们可以使用以下内容：

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

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

我们正在使用$.getScript函数，该函数专门用于动态加载脚本。第二个参数是加载的回调，因此传递给函数的函数将在加载时执行。

您应该用您需要的任何元素替换'body'选择器。或者，如果您不需要jQuery，

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

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

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

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

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

请参阅：http://jsfiddle.net/8yg9x/表示jQuery版本，http://jsfiddle.net/d95xh/表示纯Javascript版本

Answer 2

您可以使用

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

或者如果您想使用更多选项。可以找到选项的详细信息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>

最终结果将如下所示。

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

Lazy Load Reddit Widgets

2 个答案: