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

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

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

Answer 2

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 3

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 4

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 5

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 6

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.