jQuery lazyload not working on window scroll but on window resize

Question

I am using jquery lazyload on one of my pages.

Following is the issue scenario:

1) All images present in working viewport on window load, perfectly loads the images.

2) Once user scrolls the new images with class lazy gets into viewport but does not load as per its default behavior.

3) If you run lazyload command with say images A,B,C in viewport and D,E,F not in viewport:

$("img.lazy").lazyload();

A,B,C loads but D,E,F does not load.

4) Now bring D,E,F in viewport, no image loaded. But if you resize your browser window it loads the current images in viewport.

So lazyload module is working but its unable to detect unloaded images in viewport on scroll which is desired behavior. I think this has something to do with the dom structure of my page.

Can somebody suggest something based on above use case, as some of you might have faced the similar issue.

just switch to lazysizes. it is bulletproof: github.com/aFarkas/lazysizes — alexander farkas
– alexander farkas, Commented Aug 3, 2015 at 14:14

alexander farkas · Accepted Answer · 2015-08-03 16:39:58Z

1

This can have multiple issues. I would suggest that you use lazySizes, which uses modern technologies to make lazyloading config free (of course you can configure plenty of things), but it works bulletproof out of the box.

Simply a) include the lazysizes script, b) switch src to data-src and c) add the class lazyload to your image elements.

No additional JS is required.

answered Aug 3, 2015 at 16:39

alexander farkas

14.2k4 gold badges43 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergey P. · Accepted Answer · 2015-08-03 15:57:11Z

0

I have the same problem. Until I resize window(or open console!?) picture don't show.

<script type="text/javascript">
jQuery(document).ready(function ($) { 
    $("img.lazy").lazyload({
        failure_limit : 1000, 
        event: "lazyload", 
        threshold : 200, 
        effect: "fadeIn", 
        skip_invisible: false
    })
});</script>

answered Aug 3, 2015 at 15:57

Sergey P.

1941 silver badge12 bronze badges

Collectives™ on Stack Overflow

jQuery lazyload not working on window scroll but on window resize

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related