jQuery LazyLoad do not load images until scroll

Question

jQuery LazyLoad doesn't load images in open page's visible part until I scroll page even on 1px.

When I scroll page all works right

Update:

CoffeScript

jQuery ->
   $("img.lazy").show().lazyload()
   $(window).resize()

But $(window).resize() helps only if i enter it from browser's console when page have loaded

I haven't used it so maybe I'm missing something, but isn't that sort of the point of LazyLoad? — user1726343
– user1726343, Commented Dec 20, 2012 at 11:26
As a quick fix, you could fire the resize handlers for window when the page loads. $(window).resize() — user1726343
– user1726343, Commented Dec 20, 2012 at 11:34
Try scrolling the page.... $(function() { $(window).scrollTop(0); }); — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Dec 20, 2012 at 12:05
If you are loading the images with Ajax, make sure the script has finished before calling $(window).resize(). I had the same problem as you, but I forgot to make sure the ajax-loaded data (containing the images) finished loading. Solved it with a callback method that called $(window).resize() — Spock
– Spock, Commented Mar 10, 2013 at 9:37

Mario Gonzales Flores · Accepted Answer · 2013-10-30 17:03:59Z

21

$("img.lazy").lazyload({
             threshold : 50
         });

And add this:

$(window).load(function(){
     $("html,body").trigger("scroll");
});

edited Oct 30, 2013 at 17:03

answered Oct 30, 2013 at 16:57

Mario Gonzales Flores

7057 silver badges16 bronze badges

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

2 Comments

Mario Gonzales Flores Over a year ago

$("img.lazy").show().lazyload({ threshold : 50 });

Qasim Over a year ago

is adding the threshold neccessary, if you're manually triggering a scroll event?

Kashif Tufail · Accepted Answer · 2014-11-18 05:46:25Z

5

I am too late but if you are still facing this issue, use pure javascript setTimeout() and window.scrollBy() combination on your required event. I solved it onClick as I had to show images under tabbed panes where only the first loaded tab showed images when the page loaded but rest of the tabs didn't show when clicked until the user scrolls a bit. my code is below:

function myFunction() {
  setTimeout(function() {
    window.scrollBy(0, 100)
  }, 1000);;
}

<style>
  div {
    background-color: #FF9900;
    height: 999px;
    width: 100%;
  }
</style>

<a href="#" onClick="myFunction()">Click me to scroll after 1000 milliseconds</a>
<div></div>

This example scrolls down the page by 100px 1000 milliseconds after the url is clicked. Better to use 1px scroll after 400ms to make it unnoticed/seamless. Hope this helps.

edited Nov 18, 2014 at 5:46

answered Nov 18, 2014 at 4:58

Kashif Tufail

1161 silver badge4 bronze badges

2 Comments

Casey Rule Over a year ago

It's a clever work-around, but it just masked the problem instead of solving it.

Kashif Tufail Over a year ago

As I understand, not showing images until scroll is the very basis of writing Lazy Load plugin. So, if we try to change it, it might not work properly for the purpose it was seemingly built. The only solution remains is to mask the problem as needed. :)

Mika Tuupola · Accepted Answer · 2013-01-27 11:36:36Z

4

Your images must have width and height set.

answered Jan 27, 2013 at 11:36

Mika Tuupola

20.5k5 gold badges45 silver badges50 bronze badges

3 Comments

Alexey Over a year ago

In some reason i can't set width and height for images. Does any solutions exist in this case?

Mika Tuupola Over a year ago

Add width and height in css. Or I assume you have problem only with Webkit browsers. With Webkit jQuery reports images without dimensions as not visible. You might also try to set skip_invisible to false. However since browser does not know where images should be rendered in layout (because they do not have dimensions) Lazy Load might load them all (because they all are in viewport). In short. If dimensions are not set you will most likely run into problems.

Alp Altunel Over a year ago

unfortunately this is not working. setting <img src="xxxxx.jpg" class="lazy" width="400" height="200"> did not solve issue. but solution below solved. $("html,body").on('scroll', function(){ $(window).resize() });

Reinstate Monica Cellio · Accepted Answer · 2012-12-20 12:54:37Z

3

Try this....

$(function() {
    $("img.lazy").show().lazyload()
    window.onload = function() {
        $(window).resize()
    };
});

answered Dec 20, 2012 at 12:54

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

1 Comment

Alexey Over a year ago

No, helps only setTimeout( (-> $(window).resize()), 1000) , but it's to dirty

Md Ashaduzzaman · Accepted Answer · 2015-01-14 06:36:28Z

3

This is what solved this problem for me:

$("html,body").on('scroll', function(){ 
    $(window).resize() 
});

Its really simple, it just makes an window.resize on the scroll event from body and html tags. bam.

edited Jan 14, 2015 at 6:36

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

answered Jan 14, 2015 at 6:32

dansch

311 bronze badge

1 Comment

Mikeys4u Over a year ago

Tried everything else, this worked for me.... skip_invisible was still set to true, and threshold also was 0

Mark · Accepted Answer · 2013-04-13 13:59:45Z

2

The current version of Lazyload triggers the initial update upon the window load event. So if you load images dynamically later - you need an additional event such as a scroll to trigger an update cycle. This was my issue with images showing up only after scroll.

answered Apr 13, 2013 at 13:59

Mark

8769 silver badges18 bronze badges

4 Comments

ppseprus Over a year ago

and what other events are there, since for example in my case, scrolling cannot solve the issue at all cases. $(function() { $(window).scrollTop(0); }); did not work for me at all, then i figured, hell one pixel is not a pixel, so I've tries this $(function() { $(window).scrollTop(1); }); and it worked, however, only when the container DIV had so much content, that You actually had to scroll down to the bottom of it. once the content could fit in one row of images, the scroll event could not fire.

ppseprus Over a year ago

also, i fire the .lazyload() at the success of my $.post() query, so i would assume, that it fires then as well.. isn't it?

Mark Over a year ago

Nope. Just look at the source code, and find calls to the update() function. Currently (version 1.8.4) update() is called at the window load event (irrelevant if you're loading content later, e.g. your post request), window resize, and scroll events. For dynamic content you'll need a more sophisticated solution.

ppseprus Over a year ago

thanks! for now, i call this $(window).resize();, since that was the only clean way.. i might figure something later on.. :)

ppseprus · Accepted Answer · 2013-05-09 12:45:50Z

0

I get my images through a $.post() query whenever I filter by certain things, therefore I need the whole thing to run at every reload

$.post( "queries.php", { var1:var1, var2:var2, .. }, function(response){
  for( var i=0; i<response.length; i++ ) { $("#container").append(response[i]); }
  $("img.lazy").lazyload();
  $(window).resize();
}, "json");

edited May 9, 2013 at 12:45

answered May 9, 2013 at 9:42

ppseprus

5571 gold badge9 silver badges29 bronze badges

Comments

Towers · Accepted Answer · 2013-07-17 16:28:19Z

0

When you initialize lazyload you can tell it which event(s) to trigger on (by default it is set to 'scroll'). I suggest adding a custom event to that list and triggering it whenever it makes sense for you:

$('.lazy').lazyload({
    event: 'scroll whenever-i-want'
});

// whenever you want to trigger your event (after ajax load, on dom ready, etc...)
$(document).trigger('whenever-i-want');

This leaves the default scroll functionality in but also allows you to trigger the lazy loading on demand.

answered Jul 17, 2013 at 16:28

Towers

1

Comments

Community · Accepted Answer · 2017-05-23 12:03:02Z

0

As found in this SO question , setting skip_invisible to false solved the problem for me

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Oct 28, 2013 at 10:43

Pierre

5,17612 gold badges58 silver badges79 bronze badges

Comments

Md. Al-Amin · Accepted Answer · 2013-10-30 17:05:50Z

0

$(document).ready(function () {
$("img.lazy").lazyload({
<br/>placeholder: rooturl + "Themes/images/imgloading.gif",<br/>
                 effect: "fadeIn",<br/>
                 skip_invisible: false<br/>
                 });<br/>
        });<br/>

$(document).ready(function() {<br/>
       $(window).load(function() {<br/>
             update();<br/>
         }); <br/>
  });<br/>

Use this lazy load script https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L130

edited Oct 30, 2013 at 17:05

Md. Al-Amin

1,4411 gold badge13 silver badges26 bronze badges

answered Sep 19, 2013 at 10:27

RGS

5,2217 gold badges44 silver badges69 bronze badges

Comments

Binod Kalathil · Accepted Answer · 2015-05-19 09:30:17Z

0

For sliders having multiple images ordered by z-index, the lazyload option failure_limit will come in handy.

More details about this option is here

answered May 19, 2015 at 9:30

Binod Kalathil

1,9791 gold badge30 silver badges45 bronze badges

Collectives™ on Stack Overflow

jQuery LazyLoad do not load images until scroll

11 Answers 11

2 Comments

2 Comments

3 Comments

1 Comment

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

2 Comments

2 Comments

3 Comments

1 Comment

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related