Plugin Lazy-load
Buenas.
Estoy utilizando este plugin:
http://www.appelsiini.net/projects/lazyload
El plugin me funciona bien en un contenedor, pero en cuando quiero aplicárselo a varios contenedores en una misma página ya no me funciona, solo me funciona uno, el primero.
Código:
Esta es la parte del script:
$('img.lazy').lazyload({
container: $('#slider1, #slider2'),
effect : "fadeIn"
});
Y este es el HTML:
Contenedor 1:
<div id="slider1">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
<div id="slider_savant">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
<div id="slider_savant">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
</div>
Contenedor 2:
<div id="slider1">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
<div id="slider_savant">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
<div id="slider_savant">
<ul>
<li>
<img class="lazy" src="images/ffffff.gif" data-original="images/beLogoinicio.jpg" width="600" height="417" />
</div>
////
Ambos contenedores están en la misma página, uno encima de otro, en teoría si en el script especificas a qué contenedores quieres que afecte el lazy load se aplicaría, sin embargo solo se me aplica al primero.
He probado bastantes cosas, como dar otro nombre a la clase: class="lazy" (para contenedor 1) y class="lazy2" (para el contenedor 2).
Pero no consigo hacerlo funcionar.
¿Alguien le ha ocurrido algo semejante o puede ayudarme? Muchas gracias.
cloudstudio
Hola Sarken, efectivamente el plugin no da esa opción en horizontal, para poder hacerlo tienes que editar el plugin en si.
Usuario desconocido
Nada, lo acabo de probar y ocurre lo mismo, el plugin solo hace caso a uno. Vaya mierda dios mío, encima el resto de plugins semejantes son muuucho más complicados y difíciles de implementa, estoy jodido.
Pero gracias igualmente por toda la ayuda, aunque no lo hayamos conseguido, pero se agradece. Esto es tan difícil que solo lo puede arreglar un entendido de jQuery abriendo el script y cambiándolo.
adriia
Y si en vez de ponerles una #id a las dos capas, les pones la misma clase? Y luego al declarar el script seria:
$('img.lazy').lazyload({container: $('.tuClase'),
effect : "fadeIn"
});
A ver si hay suerte!
phpninja
Buff... entonces no se me ocurre nada más que modificar el plugin para que acepte más de 1 container ..
Si pudiera probarlo en directo, quizá podría toquetear un poco más...
Ánimo, Suerte y éxito ! : )
Usuario desconocido
Buenas.
Pues veamos, en efecto, el lazy es por la clase, class="lazy".
Lo que dices ya lo probé, aplicar el plugin a todo (de hecho eso es lo normal en el plugin), no hace falta container, se hace así:
$('img.lazy').lazyload({
effect : "fadeIn"
});
pero lo que ocurre si lo aplico así es que las imagenes solo aparecen cuando están a punto de desaparecer por el borde superior del navegador :(. Por eso el creador creo lo de "container", para permitir scrolls horizontales y verticales (pero no explicó como hacerlo para varios horizontales xD).
La web no la tengo colgada en ningún lado estoy a ver si la termino y compro dominio y server (es tan solo mi portfolio personal). Pero si quieres más parte del código, o que te haga screens de cualquier parte sólo dilo.
phpninja
tienes razón que no hay nada sobre esto, pero estoy seguro que además de ti hay más gente con el mismo problema.
De todas formas, no entiendo bien esta línia $('img.lazy').lazyload({
estás aplicando el plugin de lazyload a todas las imagenes de clase lazy, correcto?
Podría funcionar algo asi?
$('img.lazy').lazyload({
container: $('body'),
effect : "fadeIn"
});
o
$('img.lazy').lazyload({
container: $(document),
effect : "fadeIn"
});
No sé porque no lo había pensado antes... creo que es muy posible que aplicandolo a toda la página funcione.
tienes alguna URL donde pueda verlo ?
Usuario desconocido
Buenas. Pues veamos ya he probado.
Las dos primeras formas no funcionan. Y la segunda forma ya la había probado (de una forma parecida, es decir sin separar los containers de esa manera. Pero ni de tu manera ni de la mía, funciona >_<. Es increíble que en todo internet no encuentre alguien con este problema solucionado. Bueno seguiré buscando. Gracias por tu ayuda, a ver si al final se encuentra la manera.
phpninja
he estado buscando en la documentación, pero no aparece nada concreto.
Se me ocurre que se podría probar :
$('img.lazy').lazyload({
container: {$('#slider1),$('#slider2')},
effect : "fadeIn"
});
o
$('img.lazy').lazyload({
container: [$('#slider1),$('#slider2')],
effect : "fadeIn"
});
Pero si el plugin no lo acepta , habría que modificar el código para que recorriera el array que le viene por "container"
otra cosa, el plugin podría utilizarse así?
$('#slider1,#slider2').lazyload({
effect : "fadeIn"
});
es decir sin container, i aplicando directamente el plugin al container ?
llegaremos al final de esto : )
Usuario desconocido
Sí, te cuento lo que ocurre.
Los divs en cuestión son #slider1 y #slider2 . Éstos son dos contenedores con scroll horizontal.
Y estos dos contenedores estan en un div llamado <main> .
Bien pues el plugin te da dos opciones:
- Aplicar el lazyloading a un contenedor con scroll (entonces tienes que poner container: ("#slider1, #slider2") y solo funciona el último al que has hecho la llamada.
- Aplicar el lazyloading a tode el div <main> (que en realidad sería como aplicar el div a toda la página).
En este caso SÍ que funciona pero con una peculiaridad, las imágenes del scroll horizontal slider1 y slider2 no aparecen cuando hago scroll horizontal, sino cuando hago scroll vertical en la página, de tal manera que para ver las imágenes éstas tienen que estar casi desapareciendo por la parte superior de la página, siendo un sinsentido.
Espero haberme explicado :S
phpninja
entonces lo de meter los dos divs, dentro de otro, y aplicarle el plugin solo a ese, lo has probado?
Usuario desconocido
Buenas phpninja y gracias por la respuesta.
Sí que probé eso, es una de las primeras cosas que probé de hecho. Ya he probado bastantes, pero no hay manera de conseguir que el plugin funcione con varios contenedores con scroll. Solo funciona con uno. Y en caso de que hagas varias llamadas al plugin, sólo funciona con la llamada más reciente.
phpninja
Me da mal royo esto: .... container: $('#slider1, #slider2'),
Si solo pones uno , tambien hay que ponerlo asi, o solo la id del div?
Has probado a crear un div que contenga estos dos y solo aplicar el plugin al contenedor?
O a llamar dos veces al plugin especificando en cada caso solo un div contenedor?