Lazy Load para retrasar la carga de imagenes Lazy Load para retrasar la carga de imagenes


Mostrando resultados del 1 al 3 de 3
  1. #1
    El caso es que me di cuenta de la necesidad de algo asi cuando hice un post con un monton de fondos de pantalla en alta resolucion y cada vez que entraba tardaba un siglo en cargar la pagina. Ademas mientras cargaba no paraba de moverse arriba y abajo se hacia bastante pesado.

    La solucion es poner un sistema que retrase la carga de imagenes. Esto es util para los casos como el mio (si los usuarios ponen muchas imagenes en los posts) y ademas a ni vel general mejor el rendimiento del foro puesto que carga las imagenes solamente cuando son necesarias (nada mas abrir una pagina, las imagenes que quedan abajo no se ven, asi que no hace falta cargarlas. Solamente hace falta cargarlas cuando navegamos por la web y se tienen que ver).

    DEMO: [Curiosidad] Juego: ¿que coche es?

    (es un post con muchas imagenes.. si os fijais en la parte de abajo mientras navegais, las imagenes van apareciendo a medida que bajais)

    Bien, para hacerlo descargamos los scripts y subimos en el servidor del foro, por ejemplo en la carpeta clientscripts donde estan todos los scripts (hay uno en version normal y otro en version reducida. podeis usar el que querais, hacen lo mismo)

    Archivo Adjunto 4212

    Ahora en el header o headerinclude (yo lo he puesto en headerinclude) insertais uno de estos codigos (segun os interese):

    Lazy Load con efecto fade incluido

    Código PHP:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="clientscript/jquery.lazyload.mini.js" type="text/javascript"></script>
    <script type = "text/javascript">
        $(function() {
            $("img").lazyload({ 
                effect : "fadeIn"
             });
        });
    </script> 
    Lazy Load sin efecto fade
    Código PHP:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="clientscript/jquery.lazyload.mini.js" type="text/javascript"></script>
    <script type = "text/javascript">
        $(function() {
            $("img").lazyload();
        });
    </script> 
    Lazy Load con anticipacion de la carga en pixeles (para que no cargue justo cuando la imagen sale en pantalla sino x pixeles antes de llegar la imagen)
    Código PHP:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="clientscript/jquery.lazyload.mini.js" type="text/javascript"></script>
    <script type = "text/javascript">
        $(function() {
                $("img").lazyload({ 
                          effect : "fadeIn",
                          threshold : 200
                  });
          
        });
    </script> 

  2. #2
    Gracias queda muy bien

  3. #3
    ...Y.... 10 años más tarde..... Amigo, este código cómo haces para funcionar? ¿Yo he intentado de todo con esa rutina de LAZY LOAD y aún no logro darle funcionamiento...



Temas similares

  1. Duda: Record de usuarios online
    Y lo rompimos???
    Respuestas: 28
    Último mensaje: 21-jun-2010
  2. .::ZonaFull.Org::. | Nueva tematica, opinen.
    http://zonafull.org/wp-content/themes/Polished/images/logo.png Mi sitio web zonafull, a girado en torno a la tematica: Tecnología, noticias,...
    Respuestas: 9
    Último mensaje: 26-mar-2010

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •