Problem with images and Lazy loading

Hi,

I have implemented lazy load with a code downloaded from Cloudflare long time ago:

<script>
    (function(w, d) {
        var b = d.getElementsByTagName('body')[0];
        var s = d.createElement("script");
        var v = !("IntersectionObserver" in w) ? "8.17.0" : "10.20.1";
        s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
        s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
        w.lazyLoadOptions = {
            elements_selector: '.lazy',
            threshold: 250
        };
        b.appendChild(s);
    }(window, document));
</script>

Code that load the image:

<img class="mimg lazy" src="https://www.domain.com/photos/galeries/12178/12178_xxl_2.jpg" 
data-src="https://www.domain.com/photos/galeries/12178/12178_xxl_2.jpg" 
data-srcset="https://www.domain.com/photos/galeries/12178/12178_2.jpg 650w, https://www.domain.com/photos/galeries/12178/12178_xxl_2.jpg 1400w" 
sizes="(max-width: 992px) 650px, (min-width: 993px) 1400px, 650px" 
width="650" 
height="418" 
alt="Alt text" 
oncontextmenu="return false" 
srcset="https://www.domain.com/photos/galeries/12178/12178_2.jpg 650w, https://www.domain.com/photos/galeries/12178/12178_xxl_2.jpg 1400w">

Te question is that I have a code implemented to load different images based on screen size but is always loading the largest. This is the code:

Can anyone help me.

Thank you,
Carlos

Hey there,

The lazy loading script you are downloading is not a Cloudflare product, but it is using Cloudflare to distribute the script to users. I would suggest taking a look at the GitHub page for the script for more information on this.

This topic was automatically closed after 15 days. New replies are no longer allowed.