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

Answer 3

You need to set width and height for you images.

If width and height are not set jQuery will report images invisible in Webkit browsers on document.load event. When skip_invisible is true Lazy Load will ignore the images, meaning it wont try to figure out whether image should be loaded or not. They will load first time you scroll.

If you set skip_invisible is false plugin will try to figure out should images be loaded. However since you do not have width and height set all images will be size of 0x0 or 1x1. Because of this all images are in viewport (because of their size) when plugin kicks in. Because images are in viewport Lazy Load will instruct to load them all.

In short: Add width and height to images. Lazy Load wont work properly without them.

Answer 4

I'm not sure when this got added, but you can manually fire the 'appear' event to some or all (depending on the css selector) appear:

$("img.lazy").trigger('appear');

Got this from here: http://yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/

Answer 5

I had the same issue. They are in a scrolling div, but would only load after an initial scroll.

Using 'appear' will show them all, unless you limit it. In my case, I only wanted to show the first 3 on load. The rest of them lazy load as usual.

$("img.lazy:lt(3)").trigger('appear');

Answer 6

Try to pass additional parameter.

skip_invisible : false

This parameter is true by default, so it seems your images are not visible when plugin starts it's job. It could happens when you are using any preloader on your website.

Answer 7

I had the same problem, and found a solution for this. Please note that my images were placed inside of a div that is populated via an ajax call.

Just change a line of code inside the lazyload sources (lines 147-150) of version 1.8.4:

/* Force initial check if images should appear. */
        $(document).ready(function() {
            update();
        });

instead of

/* Force initial check if images should appear. */
        $(window).load(function() {
            update();
 });

Or eventually add the call to "update()" to any other needed event.

Answer 8

I had a similar issue where the images wouldn't load after a ajax call until I scrolled (even if I just scrolled 1px it would load). I found I needed to add a height and width to my images like Mika Tuupola said. My images were loaded dynamically, were different image sizes and loaded from a foreach loop. I added generic width and height attribute to the image tag then after the lazyload loads the image I removed the attributes so it would show the correct image size.

<img class="lazy" src="img/placeholder.gif" data-original="img/image.gif" width="1000" height="600">

$('img.lazy').lazyload({
    skip_invisible: false
}).removeClass('lazy').removeAttr('width').removeAttr('height');

Answer 9

I had the same problem with hidden elements, is a simple workaround but it works. When I click on the page, I triggering scroll event to force lazyload script. You can do the same thing with the event resize

$(document).ready(function () {
    $("img").lazyload({
        event: "lazyload",
        effect: "fadeIn",
        effectspeed: 2000
    });
    $(window).resize(function () {
        $(this).trigger("scroll");
    }); 
});

Answer 10

In short: Add width and height to images. Lazy Load wont work properly without them.

You should be loaded in advance placeholder;Like this：

<img src="./images/grey.gif" alt="" style="display:none">

And then

$("img.lazy").lazyload({placeholder : "images/grey.gif"});

If you set the width of the image to 100%,this will provide a width and height. This solved my problem.

Answer 11

This is working solution, but in is not very good for some reason:

$("img").lazyload({
    /* Image loaded callback function */
    load: function() {
        $(window).trigger('scroll');
    }
});

Every time lazyload plugin load the picture, this function will be called and window trigger 'scroll' will be emulated, so it is a solution for me

Answer 12

Increase the failure_limit.

After scrolling page plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.

Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold.

Answer 13

I was dealing with the same issue and I noticed that this problem only occurs when images are placed inside a div that is initially hidden (ie. display: none;)