Problem with images and Lazy loading


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

    (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 = "" + v + "/lazyload.min.js";
        w.lazyLoadOptions = {
            elements_selector: '.lazy',
            threshold: 250
    }(window, document));

Code that load the image:

<img class="mimg lazy" src="" 
data-srcset=" 650w, 1400w" 
sizes="(max-width: 992px) 650px, (min-width: 993px) 1400px, 650px" 
alt="Alt text" 
oncontextmenu="return false" 
srcset=" 650w, 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,

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.