javascript - Lazy load oembed ($.ajax) with lazysizes -
i have modal loads (more 50 sometimes) third party embeds different sources (twitter, instagram, facebook posts, facebook videos, ...).
all of them 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> , on… </div> </div> all ajax $.ajax outout html such 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 can't add classes diretcly iframes they're not in actual codebase.
i using lazysizes lazy load library lazy loading standard images. fail lazy load ajax requests want $.ajax (embed_request) launched/executed when corresponding area belongs (via id=item1, item2...) inside viewport or @ less 300pixels of viewport.
lazysizes mention ajax (see below) it's need add lazyload class directly iframe (which don't have in code omebed $.ajax fetch , return html when page load) , poce not adapted ombed $.ajax way put things.
//source https://github.com/afarkas/lazysizes#js-api---events //or add ajax loading //<div class="lazyload" data-ajax="my-url.html"></div> $(document).on('lazybeforeunveil', function(){ var ajax = $(e.target).data('ajax'); if(ajax){ $(e.target).load(ajax); } });
Comments
Post a Comment