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 reuq来获取音乐。我被扼杀了吗？无论如何要解决这个问题？

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/

在页面上加载超过100个soundcloud iframe小部件

1 个答案: