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

Answer 1

Your images must have width and height set.

Answer 2

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

And add this:

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

Answer 3

Try this....

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

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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");

Answer 8

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.

Answer 9

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

Answer 10

$(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

Answer 11

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