JQuery lazyload not working on scrolling window but on window resize
I am using jquery lazyload on one of my pages.
Below is the scenario of the problem:
1) All images present in the working viewport when loading the window load images perfectly.
2) After the user scrolls through new images using the lazy class, he is taken to the viewport but not loaded according to his default behavior.
3) If you run the lazyload command with the pronunciation of images A, B, C in the viewport and D, E, F not in the viewport:
$("img.lazy").lazyload();
A, B, C is loaded, but D, E, F are not loaded.
4) Now bring D, E, F to viewport, no image loaded. But if you resize your browser window, it will load the current images in the viewport.
So the lazyload module works, but it cannot detect unloaded images in the viewport on scrolling, which is the desired behavior. I think it has something to do with the structure of my site.
Can someone suggest something based on the above use case, as some of you may be facing a similar issue.
source to share
This can have several problems. I would assume you are using lazySizes , which uses modern technology to make lazyloading config free (of course you can tweak a lot of things), but it works bulletproof out of the box.
Just a) include the lazysizes script, b) the switch src
in, data-src
and c) add the class lazyload
to your image elements.
No additional JS required.
source to share
I have the same problem. Until I resize the window (or open the console !?) the image is not displayed.
<script type="text/javascript">
jQuery(document).ready(function ($) {
$("img.lazy").lazyload({
failure_limit : 1000,
event: "lazyload",
threshold : 200,
effect: "fadeIn",
skip_invisible: false
})
});</script>
source to share