16

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

8
  • 1
    I haven't used it so maybe I'm missing something, but isn't that sort of the point of LazyLoad? Dec 20, 2012 at 11:26
  • No, it should show image in visible part of page
    – Alexey
    Dec 20, 2012 at 11:33
  • 2
    As a quick fix, you could fire the resize handlers for window when the page loads. $(window).resize() Dec 20, 2012 at 11:34
  • Try scrolling the page.... $(function() { $(window).scrollTop(0); }); Dec 20, 2012 at 12:05
  • 1
    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
    Mar 10, 2013 at 9:37

11 Answers 11

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

And add this:

$(window).load(function(){
     $("html,body").trigger("scroll");
});
2
  • $("img.lazy").show().lazyload({ threshold : 50 }); Dec 4, 2014 at 21:14
  • is adding the threshold neccessary, if you're manually triggering a scroll event?
    – Qasim
    Oct 13, 2015 at 11:45
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.

2
  • It's a clever work-around, but it just masked the problem instead of solving it.
    – Casey Rule
    Nov 18, 2014 at 5:02
  • 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. :) Nov 18, 2014 at 5:45
4

Your images must have width and height set.

3
  • In some reason i can't set width and height for images. Does any solutions exist in this case?
    – Alexey
    Jan 27, 2013 at 19:16
  • 3
    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. Jan 27, 2013 at 21:31
  • 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() }); Aug 3, 2021 at 13:10
3

Try this....

$(function() {
    $("img.lazy").show().lazyload()
    window.onload = function() {
        $(window).resize()
    };
});
1
  • No, helps only setTimeout( (-> $(window).resize()), 1000) , but it's to dirty
    – Alexey
    Dec 20, 2012 at 12:59
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.

1
  • Tried everything else, this worked for me.... skip_invisible was still set to true, and threshold also was 0
    – Mikeys4u
    Jun 20, 2015 at 23:42
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.

4
  • 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
    May 9, 2013 at 9:27
  • 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?
    – ppseprus
    May 9, 2013 at 9:33
  • 1
    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.
    – Mark
    May 18, 2013 at 20:49
  • thanks! for now, i call this $(window).resize();, since that was the only clean way.. i might figure something later on.. :)
    – ppseprus
    May 19, 2013 at 18:22
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");
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.

0

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.