Lazy Load para jQuery, cargando imágenes progresivamente

En ocasiones contadas llego hasta alguna web que tiene implementado algún complemento o sistema de mostrar información que me llama la atención. Lo que hago entonces es tan simple como bucear en el código fuente a ver si es algo propio y desarrollado exclusivamente para el site en cuestión o si por el contrario es alguna cosilla que se puede encontrar y emplear como uno quiera.

Lo último que me encontré y que he implementado parece haberos gustado a unos cuantos a tenor de los comentarios y correos que me han llegado. Como ayer me llegó otro más, pensé que lo mejor era deciros cómo hago eso de que las imágenes carguen a medida que nos desplazamos con el scroll.

Es tan sencillo como usar jQuery y Lazy Load [en].

No creo que tenga que ponerme a explicar cómo «enchufarlo». Si tienes un mínimo (pero mínimo mínimo) conocimiento de hacer llamadas a javascript te bastará para hacerlo funcionar.

En cualquier caso también hay un plugin para WordPress [en] que no he probado y que en teoría debería facilitar la tarea (que, repito, es bastante sencilla ya de por sí).

Ojito al tema compatibilidad con otros plugins de jQuery puesto que Lazy Load no funciona bien con la última versión de la librería. Y recordad que para agilizar peticiones al servidor, siempre podréis cargarlo externamente (desde Google mejor)

  1. Buenas familia
    Decir solamente, que soy uno de esos que escribió a Skeku para preguntarle con que cargaba las imágenes según las veías, pues andaba buscando algo que me sirviese para ese propósito dado el diseño o tipo de navegación de la web que estaba (y sigo) montando.
    La diferencia es que me anime con el plugin de wordpress (el cual también comenta Skeku en el post), y tras tocarlo ligeramente para adaptarlo un poquitín al proyecto, me funciona las mil maravillas, y eso que lo uso con mil librearías/plugins más, y de momento, es uno de los que menos problemas me está dando.
    Para el que lo quiera, dejo la web (que Skeku ya conoce, gracias:)): http://www.loboloko.com y tiene otro ejemplo de esta gran librería.
    Un saludo

    PD: Pronto te irán unas preguntitas ya..pronto…jajajajajaja ;).

  2. >Hola
    que tal?
    Antes que todo quiero comentar que este blog me ha sido de mucha utilidad siempre, e incluso me a salvado en algunas ocasiones.

    Bueno ahora entrando mas al tema quiero comentarte que no se porq no he podido implementar este PLUG-IN este en mi codigo:

    Prueba

    $(«img»).lazyload({
    placeholder : «img/grey.gif»,
    effect : «fadeIn»
    });

    NO VEO CAMBIO ALGUNO.
    ESPERO QUE PUEDAN AYUDARME

  3. Documento sin título

    $(”img”).lazyload({
    placeholder : “img/grey.gif”,
    effect : “fadeIn”
    });

  4. SOLO ME SALE EN FIREFOX
    MAS NO EN IE, SAFARI NI CHROME

    $(function() {
    $(«img»).lazyload({
    placeholder : «img/grey.gif»,
    effect : «fadeIn»
    });
    });

  5. Buenas Renzo
    No tengo mucha idea de jquery y demás, simplemente soy el mítico manazas que mete mano a todo código que pilla para cambiarlo a mi gusto, sin tener mucha idea de nada, pero intentando conseguir el mundo, jajaja.

    Yo el código que uso, es:

    jQuery(document).ready(function($){
    jQuery(«img»).lazyload({
    effect:»fadeIn»,
    placeholder: «http://www.loboloko.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif»
    });
    });

    La única diferencia es la de la función, que yo la uso cuando se carga el documento, cuando está listo vamos, prueba con ello.
    Y sino, yo te diría que podría ser porqué entra en conflicto con algún otro plugin o librería, cosa que a mi me ha pasado con algunos plugins de jquery, que funciona en firefox y no en ie. Miralo

    No digo mucho, pero ójala te ayude para guiarte un poquitín más

    Un saludo a todos

  6. MUCHAS GRACIAS
    LOBOLOCO, TUS RECOMENDACIONES ME AYUDARON MUCHO.
    EL PLUG-IN VA DE MIL MARAVILLAS, AUNQUE TE COMENTO QUE:

    EN IE8 y en Firefox se ve el efecto, aunque en Firefox con mas fluidez.
    En IE7, Firefox y Safari sucede algo extraño (aunque es mucho mas notorio en safari),
    el efecto no funciona muy bien cuando el contenido entre las etiquetas
    es muy corto :

    ……….(poco contenido)

    En Google Chrome sucede igual, ya que este esta basado en WebKit (Safari).
    En Opera lamentablemente no funciona. Raro no? …

    PD : Buscando justamente este efecto, el otro día me tope con algo
    que me parecio MUY INTERESANTE, revisalo, espero que te sirva.

    Saludos desde Perú…
    Renzo

  7. ¿Cual es tu web Renzo? ¿Dónde tienes problemas? Por cierto, el efecto ese es bastante curioso, el de precargar la web entera (para mi, si te fijas en la web, no me serviría, ya que el usuario estaría demasiado tienmpo viendo la precarga, pero para según para que proyecto, me ha parecido muy intersante, gracias)

  8. A mí creo que me funciona hasta en IE6 correctamente, pero no recuerdo bien…

    En efecto, yo un preloader completo no lo pondría. Es mucho mejor optimizar el código y agilizar el peso del HTML. Es una técnica que ya se hacía incluso con DHTML pero yo nunca he sido partidario. En mostrar resultados de búsqueda o salto de un paso a otro en una acción OK por ejemplo.

  9. Efectivamente, a Skeku le funciona en IE6 también, y he mirado, y a mí, mi web también me funciona eso (otras cosas no), pero el lazyload, me funciona bien sí…

    Sobre lo de la precarga completa, opino los mismo más o menos que Skeku, me parece buena idea para ciertos proyectos, pero en general creo que es mejor que empiece a ver la web sea como sea.

    Saludetes

Los comentarios están cerrados.

A continuación:

Txesco's Basement

Txesco's Basement