2011-12-19 14 views
6

Descargo el plugin jquery lazyload desde este sitio http://www.appelsiini.net/projects/lazyload.Jquery lazyload plugin and callback function

de su documento no he encontrado que se pueda usar una devolución de llamada o no con el complemento de lazyload.

Supongamos que mi html parezca

<div id="gallery" class="busy"><img src="blah.jpg" /></div> 
<div id="gallery" class="busy"><img src="blah2.jpg" /></div> 
<div id="gallery" class="busy"><img src="blah3.jpg" /></div> 

mi guión como

$("#gallery img").lazyload(); 

clase ocupada se acaba de establecer una imagen cargada en el centro del div. así que necesito una devolución de llamada y, a partir de la devolución de llamada, necesito detectar la descarga de imágenes completada o no, si se completó, entonces simplemente elimino la clase del div principal correspondiente de la etiqueta de imagen.

así que por favor muéstrame la manera de implementar la devolución de llamada con lazyload y también necesito un código de muestra mediante el cual pueda eliminar la clase del div principal correspondiente de la etiqueta de imagen.

gracias

+1

tu marcado html es incorrecto, ID debe ser exclusivo para diferentes divs –

+0

pregunté por un problema diferente, ¿hay alguna función de devolución de llamada que se active cada vez que se complete la descarga de cada imagen? –

Respuesta

12

Tenía la misma pregunta. Hizo algunas búsquedas, vino aquí, y encontró la respuesta. Esto es lo que tengo, y funciona para mí:

$(this).lazyload({ 
    effect : 'fadeIn', 
    load : function() 
    { 
     console.log($(this)); // Callback here 
    } 
}); 

Espero que ayude!

+1

¡Maravilloso! Funciona sin problemas. – dnns

+0

Evento para desencadenar Cargando Más información http://www.appelsiini.net/projects/lazyload – zloctb

0

La respuesta de Rick de Graaf casi lo hizo por mí.

El problema para mí fue: También se llama a la carga para las imágenes de marcador de posición. Que en mi caso era un problema. Solo quería agregar una clase a las imágenes cargadas finales. He añadido esto para hacer que funcione para mí:

jQuery("img.lazy").lazyload({ 
      effect : 'fadeIn', 
      load : function() 
      { 
       if (jQuery(this).attr("src") != "data:image/gif;base64,R0lGODlhZABlAIAAAPn5+QAAACH5BAAAAAAALAAAAABkAGUAAAJ0hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBnZVQAAOw==") { 
        jQuery(this).addClass("visible-image");     
       } 
      } 
     }); 

Si la imagen cargada son los datos: la imagen, no se hace nada, de lo contrario añadir mi clase.