How to make Iscroll and Lazy Load jQuery plugins work together?

Question

Is there any chance of getting this two plugins to work together? Right now if I use iscroll in a div with images, Lazy load won't detect when the images should be visible.

Thanks.

EDIT:

As said in one of the comments, I have tried to apply lazyload on scroll like this:

onScrollMove: function () {
    $("img").lazyload();
    $('img').on('load',function(){myScroll.refresh();});
}

To work correctly I guess I would have to apply the same to onBeforeScrollEnd:

onBeforeScrollEnd: function () {
    $("img").lazyload();
    $('img').on('load',function(){myScroll.refresh();});
}

But is this solution affecting performance (as it is continuosly applying lazyload to all images and refreshing when they are loaded to readapt to the loaded image width/height)? I am really concerned about performance here as I will have a container scroller with several (let's say 30) scrollers inside all of theme with images. What else can I do?

EDIT 2:

This is what I have so far that I think works almost good:

onScrollMove: function() {
    $('#my_container img').lazyload({
        container: $('#my_container'),
        threshold: 200
    }).on('load', function() {
        myScroll.refresh();
    });​
}

But the problem with this solution is that when myScroll refreshes the first time, lazyload loads all the images..

Here is a fiddle: http://jsfiddle.net/U3gYS/

and it also has the problem that if the first image is viewable from the beggining, lazyload won't load that image. http://jsfiddle.net/U3gYS/1/

EDIT 3:

http://jsfiddle.net/pdakD/ I almost have it, please some help. In the new fiddle, the problems are:

1. onBeforeScrollEnd doesn't seem to work. If I include in it a console.log('something'), it looks to me as it is firing when the scroll Starts.

2. The initial #container has a height which is the span+first img. To make it look better, I added a padding-bottom (not too big) and remove it when the last image has finally loaded...What else can I do?

EDIT 4:

This looks better: http://jsfiddle.net/pdakD/1/ .onBeforeScrollEnd stills looks bad to me. I also have this option: http://jsfiddle.net/pdakD/1/ which applies

checkDOMChanges:true

But as I have multiple iscrollers and ajax data, etc, I don't think is a good idea.

SOLUTION: Here is the jfiddle of the solution proposed by Michael Alexander Freund. http://jsfiddle.net/pdakD/11/ It works but gets stuck in the bottom if you "scroll" fast.

Answer 1

Today i had the same issue and i figured out that the scroll event is not triggered, which lazyload is listening to. So the only thing you have to do, is triggering the scroll event for your scroll container manually. I used the onScrollEnd callback from iScroll and did a

onScrollEnd: function () {
    $('div.scroll').trigger('scroll');
}

while $('div.scroll') is the container i used with iScroll

var scroll, container;

container = $('div.scroll');
scroll    = new iScroll(container.get(0), {
    bounce: false,
    onScrollEnd: function () {
        container.trigger('scroll');
    }
});

and this is what the lazyload method looks like

$('img.lazyload').lazyload({
    effect: 'fadeIn',
    container: $('div.scroll')
});

Cheers!

Answer 2

This may not be the best solution but since no one else has answered:

Try recalling the lazyload method on iscroll's onScrollEnd event. Something like this:

 new iScroll('wrapper', onScrollEnd: function() {$("img.lazy").lazyload()});