Question

我想将我当前的HTML5音频播放器换成Soundcloud html5小部件播放器。我担心的是我的Wordpress（org）音乐网站上每页有11个帖子，因此每页有11个不同的Soundcloud iframe。这会大大减慢我的网站速度吗？

还有另一种方法可以将除了iframe之外的Soundcloud播放器嵌入效果更好吗？

Answer 1

iframe将阻止加载并减慢页面加载速度。

See this article for a breakdown of loading iframes, and asynchronous solutions

或者你可以按需加载iframe，有一个占位符图像，点击时使用javascript加载soundcloud播放器。

Here is a breakdown of this process applied to Youtube players

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

Answer 2

有点迟到但是这是一种不用减慢页面速度的方法：

要求： jQuery和FitVids.js（这样可以在不处理css的情况下响应iframe）

<强> 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加载时删除的类。我正在使用它，以便砌体布局有高度，否则空间会崩溃。它很有用，即使你没有使用Masonry，页面也不会跳转，你可以更改CSS和jQuery中的值以反映你的iframe大小。

同一页面上的几个Soundcloud播放器会减慢我的网站吗？

2 个答案: