Vanilla-lazyload: lazyload not working on firefox, iphone and safari?

[Pionell]

I'm including the script like this:

<script>
                (function(w, d){
                    var b = d.getElementsByTagName('body')[0];
                    var s = d.createElement("script"); s.async = true;
                    var v = !("IntersectionObserver" in w) ? "8.6.0" : "10.4.1";
                    s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
                    w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.
                    b.appendChild(s);
                }(window, document));
            });
</script>

and it's lazy loading the images that have theyr src tags replaced with data-src. However iphones, firefox and safari are not loading the images, I've tried using the cdn and using the older version of lazyload with the script:

<script>
var myLazyLoad = new LazyLoad({
                elements_selector: ".lazy"
            }); 
</script>

however thats not working on any browser. The images do have the class lazy.
The firefox version is 61, client checked the safari and iphone versions, I can't test those because I don't have apple devices.

maybe what's worthy of mentioning is that I'm using the pagespeed apache module, and jquery (old project)

If I remove the jquery script the lazyload does not seem to work anymore.

[verlok]

Hi @Pionell,
thank you for opening this.

Can you replicate the problem copying your code on a new Pen on Codepen?

Alternatively, can you post your HTML code, including the lazy images, here?

That would really help me to help you.
Thanks

[Pionell]

I was trying to replicate the issue yesterday on a simple html template, I think it's an issue with the pagespeed apache module because the html template seemed to work fine on firefox.

[verlok]

That was odd, in fact.
If I can be useful with anything please reopen this issue.

[berkovich-pavel]

Hello! I have the same problem. The script does not work on iPhone, but on the desktop version everything works good.

<script>
    (function () {
        var ll = new LazyLoad({
            load_delay: 300
        });
    }());
</script>

and i'm using preloaders

<img class="lazy responsive-img" src="/data/img/loading.svg" data-src="/data/img/img.jpg">

[berkovich-pavel]

And the same problem in demos eg delay.html. When I open the delay.html on the iPhone - all images are loaded immediately without delay...

[verlok]

@berkovich-pavel which version of lazyload are you using?

[berkovich-pavel]

10.17.0

[verlok]

@berkovich-pavel that's why. You should load version 8.x on Safari.
Please read the documentation (README.md) for more information.

[berkovich-pavel]

Thank a lot! It's my fault - I did't carefully study the instruction)