- Desde
- 23 Jul 2010
- Mensajes
- 10
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
Lazy Load sin efecto fade
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)
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>
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>
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>
