同一页面上的几个SoundCloud播放器会放慢我的网站

Question

我想将当前的HTML5音频播放器换成SoundCloud HTML5 Widget播放器。我担心的是，我的WordPress（org）音乐网站上每个页面有11个帖子，因此每页将有11个不同的SoundCloud Iframes。这会大大减慢我的网站吗？

除了表现更好的iframe之外，还有另一种嵌入SoundCloud播放器的方法吗？

Answer 1

iframes将阻止Onload并减慢您的页面加载。

有关加载iframe和异步解决方案的分解

，请参见本文。

另外，您可以按需加载iframe，拥有一个占位符图像，当单击时，使用JavaScript加载SoundCloud播放器。

这是应用于YouTube播放器的此过程的细分

最后，您可以使用SoundCloud API/库来创建一个轻巧的播放器以嵌入您的帖子。

Answer 2

有点迟到，但这是一种无需放慢页面的方法：

要求： jQuery and Fitvids.js（这使iframe响应不使用CSS）

jQuery：

$(window).load(function() {
$(".soundcloud-wrapper").each(function() {
        var URL = $(this).attr('id');
        var htm = '<iframe width="100%" height="200px" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + URL + '&amp;auto_play=false&amp;hide_related=false&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;visual=true" frameborder="0"></iframe>';
        $(this).html(htm).fitVids().removeClass('.loading');
  });
});

html：

 <div class="soundcloud-wrapper" id="60229275"><!-- this loads the iframe without blocking --></div>

CSS

.soundcloud-wrapper iframe {
    /* --- your styles if applicable --- */
}
.soundcloud-wrapper.loading {
    width:100%;
    height:200px;
}

注意：.loading是iframe加载时已删除的类。我正在使用它，以便在那里有一个砖石布局的高度，否则空间倒塌了。它很有用，因此即使您不使用砌体，页面也不会跳跃，您也会更改CSS和jQuery中的值以反映您的iFrame size。