Предотвратите огромное количество вызовов xhr/ajax на Facebook вставлять iframe

Question

У меня есть карусель с множеством социальных вложений из Facebook, содержащих все видео. Я не буду вдаваться в подробности карусели Bootstrap, так как проблема уже видна на этом простом jsfiddle и связана с вложением Facebook.

Если вы загрузите эту страницу: https://jsfiddle.net/1L95vqn4/, и посмотрите на инструменты Chrome Dev на вкладке «Сеть» и отфильтруйте «XHR» (с отключенным кешем), вы увидите 34 запроса и загрузите 5.8Mb, прежде чем вы «играть» видео, загруженное через ajax с помощью iframe Facebook.

Я хотел бы ленить загрузить вес этих ajax-запросов fb, то есть загружать только эти вызовы, когда пользователь нажимает «воспроизводить видео».

Я очень удивлен, что ничего не нашел об этом в Интернете. Другие социальные сети, такие как twitter embed, не загружают видео до тех пор, пока пользователь не начнет воспроизведение. Огромный объем данных в приложении для встраивания Facebook загружается (5Mb, 15mb, 30mb ...) даже до воспроизведения видео.

Обратите внимание только на информацию о моей фактической более сложной проблеме: на моем веб-сайте я фактически не использую этот iframe, но стиль встраивания (но невозможно поставить ajax-запросы на jsfiddle или слишком сложно для меня). И моя реальная проблема заключается в том, что когда вы загружаете карусель, где на каждом слайде есть 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>

Надеюсь, это поможет вам :)

Answer 2

Обходное решение, о котором я думаю, поскольку не существует способа предотвратить загрузку данных непосредственно, было бы отображать заполнитель вашего видео с помощью значка воспроизведения и только один раз пользователь нажимает на него, вызывает вызов 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>