How do I lazy load GIFs in Webflow?

Design help General
1

I’m trying to debug an issue I’ve noticed with lazy loading in Webflow. I have 4 gif images on the homepage of my site which are needed as part of the design, they are optimised but still need to be deferred until scrolled into view as they are below the fold on load.

Having tested this in the Network tab, I can see that GIF images with the lazy loading option checked continue to load with the initial page, very annoying and potentially a bug or missing feature?

I tried to work around this manually using the data-lazy-load attribute and the below code:

<script>
(function() {
  var lazyLoadImages = document.querySelectorAll('img[data-lazy-load]');

  for (var i = 0; i < lazyLoadImages.length; i++) {
    var lazyLoadImage = lazyLoadImages[i];

    lazyLoadImage.addEventListener('scroll', function() {
      if (this.getBoundingClientRect().top < window.innerHeight) {
        this.src = this.dataset.lazyLoad;
      }
    });
  }
})();
</script>

This doesn’t work either. It seems like Webflow just doesn’t want to obey the data-lazy-load attribute for GIFs despite it being part of basic coding standards. What is going on here am I missing something obvious or is this a glaring hole in Webflow’s image optimisation offering?

Thanks for any help in advance!

2

Ensure that lazy loading is enabled for the elements or images you want to load lazily. In Webflow, you can find this setting in the element’s settings panel. Verify that it is enabled for the affected elements.

3

Appreciate your response but this was the first thing I tried, long before I started testing it in Console, or trying to find work arounds. The default settings to lazy load GIF images don’t work, I’ve checked in multiple Webflow sites and the same problem seems to persist, so I’m looking for a work around.