Lazy load de imagenes en SMF

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:

Code: [Select]

<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
Y agregamos antes:

Code: [Select]

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

Code: [Select]

'content' => '<img src="$1" alt="{alt}"{width}{height} class="bbc_img resized" />',
Reemplazamos por:

Code: [Select]

'content' => '<img data-original="$1" alt="{alt}"{width}{height} class="bbc_img resized lazy" />',
Buscamos:

Code: [Select]

'content' => '<img src="$1" alt="" class="bbc_img" />',
Reemplazamos por:

Code: [Select]

'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!

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


Saludos!!

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

Ahora si lo entiendo perfectamente

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

Consulta, cuando decis :

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.

Solo el de jquery y solo si ya lo tenes incluido

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

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

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.

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.

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


   

Code: [Select]

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

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.

Hola disculpen que revive el tema con mas de 120 dias sin respuestas.
pero al poner estas modificaciones me funciona casi todo perfecto, casi todo por que en las imagenes de las firmas no cargan nunca, me di cuenta que era por esto ya que al modificar el src de la img desde el inspeccionar elementos (google chrome) si mostro la imagen.

solo eso y disculpen si hice mal en responder.