Lazy Load para retrasar la carga de imagenes

**heatstroke** · 09/09/2010, 16:44

Esto es sobre todo para webmasters.

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

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)

lazyload.rar

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>