Hi guys,

I managed to workaround this using the lazysizes JS library and their unveilhooks extension

https://github.com/aFarkas/lazysizes

https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/unveilhooks/ls.unveilhooks.js

<div class="lazyload" data-script="link-to-elfsight-widget.js"></div>

Lazysizes with unveilhooks is a good option for this. However there should be a native solution.

It can be done like this with plain JavaScript(ES6 format) and a little help of jQuery (you could also rewrite this without using jQuery):

let instagramFeedScrollDistance;

let instagramLoaded = false;

function lazyLoadInstagramFeed() {

let scrollDistance = $(window).scrollTop();

let windowHeight = $(window).height();

if ((scrollDistance >= (instagramFeedScrollDistance - windowHeight)) && !instagramLoaded) {

let instagramScript = $.getScript('//apps.elfsight.com/p/platform.js');

instagramLoaded = true;

}

}

$(() => {

const feed = $('.class-with-your-app-id');

if (feed.length) {

instagramFeedScrollDistance = feed.offset().top;

instagramLoaded = false;

$(window).on('scroll', lazyLoadInstagramFeed);

lazyLoadInstagramFeed();

}

});

A native approach with IntersectionObserver would be even better, but isn't suppported in IE.