andy andy - 1 year ago 89
Javascript Question

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

Answer Source

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 () {
             event: "lazyload",
             effect: "fadeIn",
             effectspeed: 2000

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download