jQuery LazyLoad do not load images until scroll

问题

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

回答1:

Your images must have width and height set.

回答2:

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

And add this:

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

回答3:

Try this....

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

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

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

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

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

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

回答9:

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

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

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

来源：https://stackoverflow.com/questions/13971151/jquery-lazyload-do-not-load-images-until-scroll

标签

jquery

lazy-loading