Lazy Load won't load visible images

问题

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,});
});

回答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.

回答2:

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

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

回答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.

回答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/

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

回答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.

回答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.

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

回答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");
    }); 
});

回答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.

回答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

回答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.

回答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;)

来源：https://stackoverflow.com/questions/11419537/lazy-load-wont-load-visible-images

标签

javascript

jquery

html

lazy-loading