Lazy Load won't load visible images

Question

I'm trying to use lazyload to only load images that are visible (because my site is responsive and some content is hidden with display:none to clients on a smaller screen).

Basically, lazyload works, but ONLY after I scroll the page a little.

This is the lazy load settings I'm using, and even after setting the threshold to 2000px (more than the entire page height) it still only loads images after the user scrolls the page (even 1 px). This bug only appears in webkit browsers.

$(document).ready(function () {
    $("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});

Answer 1

I think it could be some misbehavior of threshold parameter, but still you can manually fire the loading according to this page:

<script type="text/javascript">
  $(document).ready(function () {
      $("img")
         .lazyload({
             event: "lazyload",
             effect: "fadeIn",
             effectspeed: 2000
           })
         .trigger("lazyload");
  });
</script>

but if you want to load all images on ready, why need lazyload at all? You could just use $.animate.

Answer 2

Just add this after .lazyload() and it will trigger scroll and show images

$(window).trigger('scroll');