javascript - 页面上加载了超过 100 个 soundcloud iframe 小部件

Question

我正在尝试加载超过 100 个 souncloud iframe 小部件，但是加载所有 iframe 大约需要 2 分钟。这是脚本代码:

for (x in djlist) {
SC.get('/users/' + djlist[x] + '/tracks',{ limit: 1 }, function(tracks) {
  console.log(tracks[0].id);
   myTrack = tracks[0].id;
  var str = '<iframe width="500" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + myTrack + '&amp;color=0066cc&amp;inverse=true&amp;auto_play=false&amp;show_user=true"></iframe>';
  var div = document.getElementById("body");
  div.insertAdjacentHTML( 'beforeend', str );

   looper++;
});
}

我在想也许首先对 iframe 对象进行服务器端渲染？我知道每个 iframe 都会向 soundcloud 发出一个 api 请求来获取音乐。我是不是被限流了？无论如何要解决这个问题吗？

Answer 1

在我看来，您应该创建自己的带有播放按钮的界面，并在用户单击它时通过正确的 iframe 进行切换。要自动播放，您应该将 autoplay 参数设置为 true。见下文:

HTML:

<div class="myPlayer">
    <span id="trackName">My Music</span> 
    <button id="playButton" data-track="72395994">Play</button>
</div>

Javascript:

var iframeStart = '<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/';
var iframeEnd = '&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>});';

$("#playButton").click(function(){
    var iframeCode = iframeStart + $(this).attr("data-track") + iframeEnd;
    $(".myPlayer").html(iframeCode);
});

工作示例: https://jsfiddle.net/x702rfxv/2/