在Facebook嵌入iframe上防止大量的xhr/ajax调用

Question

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

如果您加载此页面:https://jsfiddle.net/1L95vqn4/,并查看"网络标签"上的Chrome开发工具并过滤"XHR"(禁用缓存),您将看到34个请求并加载在您甚至"播放"所有通过Facebook iframe通过ajax加载的视频之前5.8Mb.

我想懒得加载那些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

您可以像下面描述的那样使用 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>

我希望这对你有帮助:)