Lazy loading on instagram images to improve performance

lazy load can help a website that use this plugin (totally media center) to improve the general performance loading the images on-scroll only

  • Guest
  • Nov 16 2019
  • Attach files
  • Jens Martsch commented
    20 Mar 02:59pm

    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('//');

    instagramLoaded = true;



    $(() => {

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

    if (feed.length) {

    instagramFeedScrollDistance = feed.offset().top;

    instagramLoaded = false;

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




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

  • Patrick commented
    2 Mar 10:38pm

    Hi guys,

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

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