I have implemented lazy load with this code:
<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;
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));
Image:
<img class="mimg lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEHAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://example.com/photos/galeries/11992/11992_3.jpg" data-srcset="https://example.com/photos/galeries/11992/11992_3.jpg 650w, https://example.com/photos/galeries/11992/11992_xxl_3.jpg 1600w" sizes="(max-width: 992px) 650px, (min-width: 993px) 1600px, 650px" width="650" height="433" alt="Alt text" />
The question is that it is always loading the largest image xxl.
I don’t know why it doesn’t load the little image for example in mobile devices.
Thank you