• 0 FavoritosFavoritos
  • 9 RespuestasRespuestas
  • 4097 LeídoVeces Leído
  • 4 PuntosPuntos

Tema: Lazy load de imagenes en SMF

Usuario: 4kstore
Rango: Administrador
Mensajes: 4768
Puntos: 8044
Mi web: http://www.smfsimple.com
Perfil: Ver Perfil
Pais:
ar
Lazy load de imagenes en SMF
Agosto 23, 2016 - 06:38 18:38

Buenas quería compartirles un tutorial de como utilizar lazy load en los temas de nuestro foros.

¿Qué es lazy load ?

Según el autor del script:
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.

Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.


En definitiva lo que hace es cargar las imágenes de nuestra pagina solo si están en una posición visible esto ahorrara muchísimos recursos de nuestro sitio y hará que las paginas cargue mucho mas rápido.
Muchas veces nos encontramos con paginas de tutoriales o de respuesta tras respuesta llena de imágenes y sucede que sin el script estas imágenes cargan aunque nosotros no lleguemos a verlas lo que hace que el rendimiento de nuestro sitio sea muy lento.

Demo:
http://www.appelsiini.net/projects/lazyload/enabled.html

La librería:
Sobre la librería no voy a comentar mucho el unico requerimiento es que usa JQuery para funcionar.

Sitio web: http://www.appelsiini.net/projects/lazyload
Librería minificada: https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.min.js

Integración con SMF:

Vamos con lo que realmente nos importa como bien dice la documentacion del script lo primero que tenemos que hacer es importar las librerías, para eso tenemos que editar el archivo index.template para agregar los javascript en la cabecera de nuestro foro.

Primero que nada guardamos el archivo jquery.lazyload.min.js en la carpeta: Themes/default/scripts/

Luego editamos el archivo Themes/{tu-theme}/index.template.php

Buscamos:
Código: [Seleccionar]
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
Y agregamos antes:
Código: [Seleccionar]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="', $settings['default_theme_url'], '/scripts/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
     $("img.lazy").lazyload();
  });
  </script>

En el código verán que agregamos las librerías y que ademas en la función ready de jquery enlazamos a todas las imágenes que tengan la clase ".lazy" con la función lazyload.

Por lo tanto lo siguiente es agregar la clase lazy a las imágenes y ademas, según la documentación, agregarle un atributo data-original a las imágenes que es el que buscara el script.

Editamos el archivo Sources/Subs.php

Buscamos:
Código: [Seleccionar]
'content' => '<img src="$1" alt="{alt}"{width}{height} class="bbc_img resized" />',
Reemplazamos por:
Código: [Seleccionar]
'content' => '<img data-original="$1" alt="{alt}"{width}{height} class="bbc_img resized lazy" />',
Buscamos:
Código: [Seleccionar]
'content' => '<img src="$1" alt="" class="bbc_img" />',
Reemplazamos por:
Código: [Seleccionar]
'content' => '<img data-original="$1" alt="" class="bbc_img lazy" />',
Con eso el script ya estaría funcionando espero que lo prueben y también que jueguen con esto porque el script tiene mas opciones, pueden ponerle un placeholder especifico para cuando esta por cargar la imagen, pueden cambiar el efecto que tiene de fade, pueden usar eventos como el click para cargar la imagen y varias cosas mas.

El script es muy recomendado yo lo use en varios sitios profesionales que tuve que desarrollar y realmente nunca me fallo y por el contrario me ayudo a bajar mucho los tiempos de carga de sitios institucionales que utilizan muchas imágenes (la mayor parte algo pesadas).

Aclaraciones:
El tutorial fue desarrollado para una instalación limpia de SMF puede que algunas modificaciones que tengan que hacer no las encuentren porque ya fueron modificadas por otros mods pero la esencia es esta y si tienen problemas deberán interpretar cada caso.

SI tienen algún mod que utilice jquery no lo vuelvan a importar y solo tengan presente que tanto la librería como el script aparezcan después del import de jquery.

Saludos!

No Tienes Permisos Para Dar Puntos
point 4 Puntos

Usuarios que puntuaron el tema » Príncipe_Azul (3 Pts) » coltp45 (1 Pts) 

Tags for this topic:

Usuario: Príncipe_Azul
Rango: Nuevo Usuario
Mensajes: 297
Puntos: 12
Mi web: http://www.argentinairc.net/foro/
Perfil: Ver Perfil
Pais:
ar
Re:Lazy load de imagenes en SMF
Respuesta #1 Agosto 23, 2016 - 07:18 19:18
Hola amigo, parece muy interesante el script, aunque no lo llego entender del todo cuál es su función, lo que entiendo es por ejemplo si el avatar de un usuario o una imagen que esté en algún post no funcione, ese script hará que el navegador deje de cargar esa imagen para así poder acelerar la carga de la página ya que la imagen del avatar o del post no funciona, ¿es correcto?.


Muchas gracias por compartir y dejarnos el tutorial para implementarlo en SMF!! :)
Ahí te dejé unos puntos ;D


Saludos!!

Usuario: 4kstore
Rango: Administrador
Mensajes: 4768
Puntos: 8044
Mi web: http://www.smfsimple.com
Perfil: Ver Perfil
Pais:
ar
Re:Lazy load de imagenes en SMF
Respuesta #2 Agosto 23, 2016 - 07:22 19:22
Lo que hace es cargar las imagenes mediante vas haciendo scroll sobre la pagina, es decir solo va a cargar las imagenes que realmente vas a ver.
Entonces si en un post tenes 100 imagenes el usuario que entra al principio de la pagina solo le cargara las primeras 3 por ejemplo y mediante vaya haciendo scroll ira cargando el resto, entonces si hiciste scroll hasta la mitad de la pagina y te fuiste posiblemente solo cargaste 50 imagenes de las 100.

Con el demo deberias entenderlo: http://www.appelsiini.net/projects/lazyload/enabled.html
Si abris la consola de chrome o firefox veras como va cargando los recursos mientras vas haciendo scroll sobre el contenido.
Saludos

Usuario: Príncipe_Azul
Rango: Nuevo Usuario
Mensajes: 297
Puntos: 12
Mi web: http://www.argentinairc.net/foro/
Perfil: Ver Perfil
Pais:
ar
Re:Lazy load de imagenes en SMF
Respuesta #3 Agosto 23, 2016 - 07:31 19:31
Ahora si lo entiendo perfectamente 8) :)

Muchas gracias por la explicación!!! ;D
Y por cierto está bueno el script!

Usuario: coltp45
Rango: Recién Llegado
Mensajes: 3
Puntos: 0
Mi web: http://www.futbol-argento.com.ar
Perfil: Ver Perfil
Pais:
ar
Re:Lazy load de imagenes en SMF
Respuesta #4 Octubre 15, 2016 - 03:51 15:51
Consulta, cuando decis :
Citar
SI tienen algún mod que utilice jquery no lo vuelvan a importar y solo tengan presente que tanto la librería como el script aparezcan después del import de jquery.

A que te referis? a que no pongamos el codigo en index.template?

Modifique todo y no logre hacerlo funcionar, de hecho veo que afecta los videos insertados en los post, que ahora se muestran en negro.

Usuario: 4kstore
Rango: Administrador
Mensajes: 4768
Puntos: 8044
Mi web: http://www.smfsimple.com
Perfil: Ver Perfil
Pais:
ar
Re:Lazy load de imagenes en SMF
Respuesta #5 Octubre 16, 2016 - 03:00 15:00
Solo el de jquery y solo si ya lo tenes incluido

Usuario: coltp45
Rango: Recién Llegado
Mensajes: 3
Puntos: 0
Mi web: http://www.futbol-argento.com.ar
Perfil: Ver Perfil
Pais:
ar
Re:Lazy load de imagenes en SMF
Respuesta #6 Octubre 16, 2016 - 04:19 16:19
Bueno, no hay caso. En mi theme exodus ya estaba cargada la libreria y sigo teniendo el mismo problema. Las imagenes se cargan todas y los videos se ven en negro.
Lo probe tambien en el theme curve y lo mismo. los videos salen en negro. se ve que no es compatible con este mod de video.s

Usuario: Príncipe_Azul
Rango: Nuevo Usuario
Mensajes: 297
Puntos: 12
Mi web: http://www.argentinairc.net/foro/
Perfil: Ver Perfil
Pais:
ar
Re:Lazy load de imagenes en SMF
Respuesta #7 Octubre 17, 2016 - 04:33 04:33
Hola coltp45, presionaste F5 en tu navegador?, quizás le hace falta un refresco.
Podrías dejarnos algún tema en donde haya muchas imágenes para verificar lo que nos comentas, a ver si solo te ocurre a vos o todo el mundo.


Saludos!!

Usuario: Papá distante
Rango: Administrador
Mensajes: 3459
Puntos: 160
Perfil: Ver Perfil
Pais:
de
Re:Lazy load de imagenes en SMF
Respuesta #8 Octubre 17, 2016 - 01:39 13:39
A veces también es un asunto de la versión, he visto a varios seguir usando la rama 1.x de Jquery y si tu modelo necesita algo de la 2.x te puede romper todo.
Enviado atraves de Adkimode

Usuario: coltp45
Rango: Recién Llegado
Mensajes: 3
Puntos: 0
Mi web: http://www.futbol-argento.com.ar
Perfil: Ver Perfil
Pais:
ar
Re:Lazy load de imagenes en SMF
Respuesta #9 Octubre 17, 2016 - 06:15 18:15
Hola coltp45, presionaste F5 en tu navegador?, quizás le hace falta un refresco.
Podrías dejarnos algún tema en donde haya muchas imágenes para verificar lo que nos comentas, a ver si solo te ocurre a vos o todo el mundo.


Saludos!!

Si,  siempre lo hago cuando aplico un cambio.

Citar
A veces también es un asunto de la versión, he visto a varios seguir usando la rama 1.x de Jquery y si tu modelo necesita algo de la 2.x te puede romper todo.


Asi es como tengo mi index.template.php


   
Código: [Seleccionar]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/exodus.js?fin20"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/bootstrap.min.js?fin20"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type=button]").attr("class", "btn btn-default btn-sm");
$(".button_submit").attr("class", "btn btn-info btn-sm");
$("#advanced_search input[type=\'text\'], #search_term_input input[type=\'text\']").removeAttr("size");
$(".table_grid").addClass("table table-striped");
$("img[alt=\'', $txt['new'], '\'], img.new_posts").replaceWith("<span class=\'label label-warning\'>', $txt['new'], '</span>");
$("#profile_success").removeAttr("id").removeClass("windowbg").addClass("alert alert-success");
$("#profile_error").removeAttr("id").removeClass("windowbg").addClass("alert alert-danger");
});
</script>
<script src="', $settings['default_theme_url'], '/scripts/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
     $("img.lazy").lazyload();
  });
  </script>


Citar
Podrías dejarnos algún tema en donde haya muchas imágenes para verificar lo que nos comentas, a ver si solo te ocurre a vos o todo el mundo.
En esto momento no esta con esta modificacion, ya que no se podian ver videos. Varios usuarios me comentaron que les salia un recuadro negro donde iba el video.

Luego edito y dejo un link por aqui.

Saludos.

 

TAGS



Topics Releated By Tags

Asunto Respuestas
Mods SMFSimple Iniciado por Lean 95 Respuestas
34147 Vistas
Mods SMFSimple Iniciado por Papá distante 18 Respuestas
9687 Vistas
Themes Oficiales SMFSimple Iniciado por Lean 55 Respuestas
29524 Vistas
Reglas y anuncios de la comunidad Iniciado por 4kstore 1 Respuestas
2901 Vistas
Mods SMFSimple Iniciado por 4kstore 12 Respuestas
7346 Vistas
top

Smfsimple.com es un sitio destinado a brindar un servicio de soporte y herramientas para foros realizados con el sistema de foros gratuito simplemachines.org. Contamos con un selecto equipo de desarrolladores y conocedores del sistema, sus foros estaran en buenas manos.
This site is not affiliated with or endorsed by Simple Machines