My site contains three horizontal divs (containers) which all have lazy-loading images within a list view (ul -> li). They all load completely fine when 'threshold' is set to '0' and all the images load when I scroll to the right.
However, when I set 'threshold' to '500', it is only the first container who lazy loads. The other div containers only start lazy loading until I have scrolled towards the end of the first div-container.
EXAMPLE: If I try to scroll in the second div-container no images starts to load. The lazy loading only start when the first div-container is scrolled towards its end.
My script:
<script type="text/javascript" charset="utf-8">
$(function () {
$("img").lazyload({ container: $(".horizontalBookList1") });
});
$(function () {
$("img").lazyload({ container: $(".horizontalBookList2") });
});
$(function () {
$("img").lazyload({ container: $(".horizontalBookList3") });
});
$("img").lazyload({
effect: "fadeIn"
});
$("img").lazyload({
threshold: 500
});
</script>
In advance, thank you very much :)
A link to the lazy-load script: http://www.appelsiini.net/projects/lazyload
