延迟加载 Reddit 小部件

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>

如果我尝试将它移到我的scripts.js 中，在那里我执行其他 jQuery 东西，它最终会用小部件重写整个 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&t=all&sort=new&style=off';
$('.redditdiv').append(redditscript);

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

附：额外问题：是否有人也对这个 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&t=all&sort=new&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&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);

请参阅：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

Answer 3

此方法仅在用户可见时才会延迟加载小部件，如果小部件未滚动到视口中则不会加载，它的工作原理类似于延迟加载图像。

将LazyHTML 添加到头部。

<script async src="https://cdn.jsdelivr.net/npm/lazyhtml@1.0.0/dist/lazyhtml.min.js" crossorigin="anonymous" debug></script>

在 LazyHTML Wrapper 中包装小部件。

延迟加载 Reddit 小部件

<div class="lazyhtml" data-lazyhtml onvisible>
  <script type="text/lazyhtml">
  <!--
   <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>
  -->
  </script>
</div>

延迟加载 Twitter 小部件。

<div class="lazyhtml" data-lazyhtml onvisible>
  <script type="text/lazyhtml">
  <!--
<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>
  -->
  </script>
</div>