Lazy load $.ajax requests without having access to the final html output

I have a modal with loads (more than 50 sometimes) third party embeds from different sources (twitter, instagram, facebook posts, facebook videos, ...).

All of them are launched using oembed (standardized embed format)

<div id="embeds-list">

  <div>    

   <div id="item1" class="list-item">
   <figure class="instagram-embed">
  <script>
var url = « https://api.instagram.com/oembed?url=https://www.instagram.com/p/5456544654565/";
embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
          var embed_html = data.html;
          $( "div#item1 > figure").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    }; 
$.ajax(embed_request);
</script>
</figure class="instagram-embed">
</div>

  <div id="item2" class="list-item">
    <figure class="twitter-embed">
  <script>
var url = "https://publish.twitter.com/oembed?url=https://twitter.com/coca/status/546664465342324"; 

embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
           var embed_html = data.html;
          $( "div#item2 > figure").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    };  
$.ajax(embed_request);
</script>
</figure>
</div>

<div id="item3" class="list-item">
 <figure class="twitter-embed">
    <script>
var url = "https://publish.twitter.com/oembed?url=https://twitter.com/muse/status/65353453F"; 

embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
           var embed_html = data.html;
          $( "div#item3 > figure").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    }; 
$.ajax(embed_request);
</script>
</figure>
</div>

<div class="list-item" id="item4" >
  <figure class="instagram-embed">
    <script>
var url = « https://api.instagram.com/oembed?url=https://www.instagram.com/p/cftzezeker5/";
embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
          var embed_html = data.html;
          $( "div#item4 > figure").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    };  
 $.ajax(embed_request);
 </script>
 </figure>
</div>

<div class="list-item" id="item5" >
  <figure class="fb-embed">
    <script>
var url = « var url = "https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/fdgyez556Yds";
";
embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
          var embed_html = data.html;
          $( "div#item5 > figure").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    };  
 $.ajax(embed_request);
</script>
</figure>
</div>

and so on…
 </div>

</div>

All those ajax $.ajax will outout an html such as for facebook posts:

<iframe name="f2d29ksdksd24" width="750px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:post Facebook Social Plugin" src="https://www.facebook.com/v2.3/plugins/post.php?app_id=&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F1FegrZjPbq3.js%3Fversion%3D42%23cb%3Df39db5bcb71e548%26domain%example" style="border: none; visibility: visible; width: 750px; height: 516px;" class=""></iframe>

So I can't really add classes diretcly to the iframes as they're not in my actual codebase.

I am using lazysizes lazy load library for lazy loading standard images. But I fail to do lazy load my ajax requests that is to say I want that my $.ajax (embed_request) are only launched/executed when the corresponding area it belongs to (via the id=item1, item2...) is inside the viewport or at less than 300pixels of the viewport.

aFarkas / lazysizes

Lazy load $.ajax requests without having access to the final html output #373