Lazy Load para retrasar la carga de imagenes

heatstroke

Curioso
Verificación en dos pasos desactivada
Desde
23 Jul 2010
Mensajes
10
Crédito(s)
8
Puntos
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)

Ver el 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

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
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)
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>
 

ZEL

Gamma
Verificación en dos pasos desactivada
Desde
17 Dic 2009
Mensajes
428
Crédito(s)
0
Puntos
0
Gracias queda muy bien
 

GizmoIHS

VIP
Gamma
Verificación en dos pasos desactivada
Desde
7 Mar 2015
Mensajes
291
Crédito(s)
0
Puntos
562
...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...
 

Arriba