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
  • Patrick commented
    02 Mar 22:38

    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>

  • Jens Martsch commented
    20 Mar 14:59

    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.