lazyload - ¿Cómo hacer que los plugins JQuery de Iscroll y Lazy Load funcionen en conjunto?

lazy load scroll

Question

¿Hay alguna posibilidad de que estos dos complementos funcionen juntos? Ahora mismo si uso iscroll en un div con imágenes, la carga lenta no detectará cuando las imágenes deberían ser visibles.

Gracias.

EDITAR:

Como dije en uno de los comentarios, he tratado de aplicar lazyload en scroll de esta manera:

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

Para que funcione correctamente, supongo que tendré que aplicar lo mismo a onBeforeScrollEnd:

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

Pero, ¿esta solución afecta el rendimiento (ya que continuamente aplica lazyload a todas las imágenes y se actualiza cuando se cargan para readaptarse al ancho / alto de la imagen cargada)? Estoy realmente preocupado por el rendimiento aquí, ya que tendré un scroller contenedor con varios (digamos 30) scrollers dentro de todo el tema con imágenes. ¿Que más puedo hacer?

EDICION 2:

Esto es lo que tengo hasta ahora y creo que funciona casi bien:

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

Pero el problema con esta solución es que cuando myScroll se actualiza por primera vez, lazyload carga todas las imágenes ...

Aquí hay un violín: http://jsfiddle.net/U3gYS/

y también tiene el problema de que si la primera imagen se puede ver desde el principio, lazyload no cargará esa imagen. http://jsfiddle.net/U3gYS/1/

EDIT 3:

http://jsfiddle.net/pdakD/ Casi lo tengo, por favor ayuda. En el nuevo violín, los problemas son:

1. onBeforeScrollEnd no parece funcionar. Si incluyo en ella un console.log (''algo''), me parece que está disparando cuando se inicia el desplazamiento.

2. El #container inicial tiene una altura que es el lapso + primer img. Para que se vea mejor, agregué un fondo acolchado (no demasiado grande) y lo eliminé cuando finalmente se cargó la última imagen ... ¿Qué más puedo hacer?

EDIT 4:

Esto se ve mejor: http://jsfiddle.net/pdakD/1/ .onBeforeScrollEnd stills se ve mal para mí. También tengo esta opción: http://jsfiddle.net/pdakD/1/ que se aplica

checkDOMChanges:true

Pero como tengo múltiples iscrollers y datos de ajax, etc., no creo que sea una buena idea.

SOLUCIÓN: Aquí está el jfiddle de la solución propuesta por Michael Alexander Freund. http://jsfiddle.net/pdakD/11/ Funciona, pero se queda atascado en la parte inferior si se "desplaza" rápidamente.

Answer 1

Esta puede no ser la mejor solución, pero como nadie más ha respondido:

Intente recuperar el método de lazyload en el evento iscroll onScrollEnd. Algo como esto:

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

Answer 2

Hoy tuve el mismo problema y me di cuenta de que el evento de desplazamiento no se dispara, lo cual está escuchando lazyload. Entonces, lo único que tiene que hacer es activar manualmente el evento de desplazamiento para su contenedor de desplazamiento. Utilicé la devolución de llamada onScrollEnd de iScroll e hice un

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

mientras que $(''div.scroll'') es el contenedor que utilicé con iScroll

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

y así es como se ve el método de lazyload

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

¡Aclamaciones!