Question

我有一个Bootstrap Carousel，其中有许多来自Facebook的社交嵌入包含视频。我不会详细介绍Bootstrap轮播，因为问题已在这个简单的jsfiddle上可见，并且是由于Facebook嵌入。

如果您加载此页面：https://jsfiddle.net/1L95vqn4/，并查看“网络标签”上的Chrome开发工具并过滤“XHR”（禁用缓存），您将看到34个请求并加载5.8Mb在你甚至“播放”由Facebook iframe通过ajax加载的视频之前。

我想懒得加载那些fb ajax请求的权重，也就是说，只有当用户按下“播放视频”时才加载这些调用。

我很惊讶我在网上找不到任何相关内容。其他社交网络（如twitter嵌入）在用户按下播放之前不会加载视频。即使在播放视频之前，Facebook嵌入案例中的大量数据也会被加载（5Mb，15mb，30mb ......）。

请注意，仅仅是为了获取有关我实际更复杂问题的信息：在我的网站上，我实际上并没有使用这个iframe而是嵌入了样式（但是不可能在jsfiddle上放置ajax请求或者对我来说太复杂）。而我的实际问题是当你加载一个旋转木马时，每张幻灯片上有20个facebook嵌入视频，那么当你打开旋转木马时，它会增加很大的性能。

$.ajax({
  url: 'https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/1526674334016658',
  dataType: 'jsonp',
  cache: false,
  success: function (data) { 
    try {         
      var embed_html = (data.html);
      $('div#item1').html(embed_html);
    } catch (err) {
      console.log(err);
    }
  }
});

有没有办法阻止FB通过延迟加载或其他方式加载所有这些影响性能的ajax xhr和mp4？

Answer 1

我正在考虑一种解决方法，因为看起来没有办法阻止数据直接加载，就是用播放图标显示视频的占位符，并且只有用户一次单击它会触发将替换元素的xhr调用。然后，如果用户已经请求播放视频，则默认情况下不会自动播放视频。

类似的东西（正如你所说的那样，在jsfiddle中无法真正起作用，但你明白了）：

$('#item1').on('click', () => {

  $.ajax({
    url: 'https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/1526674334016658',
    dataType: 'jsonp',
    cache: false,
    success: data => $('div#item1').html(data.html),
  });

})

.facebook-play {
  background-image: url(https://www.facebook.com/rsrc.php/v3/yE/r/UxpyARHiHA2.png);
  background-repeat: no-repeat;
  background-size: 81px 224px;
  background-position: 0 0;
  height: 80px;
  margin: -40px 0 0 -40px;
  width: 80px;
  
  position: absolute;
  top: 50%;
  left: 45%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item1">
  <img src="https://cdn.pixabay.com/photo/2016/05/18/20/57/cat-1401557_1280.jpg" width=550 height=360 />
  <i class="facebook-play" />
</div>

Answer 2

您可以使用如下所述的AjaxSetup（但这仅是一般示例）：

var i = 0;
function ajaxTest() {
    // these HTTP methods do not require CSRF protection
    $.get('http://my.site.com/somepage.html');
}
jQuery.ajaxSetup({
    beforeSend: function (xhr, settings) {
        i++;
        if (i > 50) {
            $('#res').html('Not allowed!</br>');
            return false;
        } else {
            $('#res').html('Allowed![' + i + ']</br>');
            return true;
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="ajaxTest()">Test</button>
<div id="res"></div>

我希望这可以帮助你:)。

在Facebook嵌入iframe

2 个答案: