{"id":33592,"date":"2020-02-24T15:55:57","date_gmt":"2020-02-24T13:55:57","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=33592"},"modified":"2020-02-24T18:42:20","modified_gmt":"2020-02-24T16:42:20","slug":"carga-diferida-imagenes-lazy-loading-product-images-st-themes","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/prestashop\/carga-diferida-imagenes-lazy-loading-product-images-st-themes\/","title":{"rendered":"Carga Diferida de Im\u00e1genes con Lazy Loading Product Images (By ST-Themes para PS 1.6 y PS 1.7)"},"content":{"rendered":"
<\/div>

\"Carga<\/p>\n

Si estamos usando la plantilla que viene por defecto con PrestaShop 1.6 o 1.7<\/strong> (u otras que no sean de ST-Themes) y tenemos muchos productos con im\u00e1genes<\/strong>, con el siguiente m\u00f3dulo podremos conseguir mejorar la velocidad de carga de nuestra web<\/strong>, o al menos de las im\u00e1genes de nuestros productos.<\/p>\n

Este m\u00f3dulo es ideal para solucionar problemas en la carga de im\u00e1genes en nuestra tienda online<\/strong>, siempre que estamos usando una plantilla que no tenga el sistema de \u201clazy loading images\u201d<\/em>.<\/p>\n

Damos por hecho que al ser una tienda enfocada hacia el comercio electr\u00f3nico (ecommerce) vamos a tener unos cuantos productos con im\u00e1genes, ya que obviamente si tenemos pocos no vale mucho la pena utilizar este m\u00f3dulo, sino que ser\u00eda mucho mejor optimizar<\/a> las poquitas im\u00e1genes que tuvi\u00e9ramos, y as\u00ed ahorrarnos la instalaci\u00f3n e inyecci\u00f3n de c\u00f3digo en nuestra plantilla, pero como decimos entendemos que al tener una tienda online tendremos muchas im\u00e1genes, y es posible que nuestra web se resienta por ello, as\u00ed que Lazy Loading Product Images puede ser la soluci\u00f3n perfecta para cargar de forma escalonada nuestras im\u00e1genes<\/strong>.<\/p>\n

Pero, antes de todo\u2026<\/p>\n

\u00bfQu\u00e9 es la Carga Diferida o Lazy Loading?<\/strong><\/h2>\n

El tema este de la carga diferida de im\u00e1genes o lazy loading puede que nos suene un poco chino, pero no hay problema, ya que vamos a tratar de explicarlo a continuaci\u00f3n en apenas un p\u00e1rrafo:<\/p>\n

Si tenemos una tienda online con muchos productos con im\u00e1genes como es comentando antes, es posible que nuestra web tarde mucho en cargar, sobre todo si esta tiene que cargar todas las im\u00e1genes que tengamos en la portada o en las secciones, sin embargo, con la carga diferida lo que se consigue es que solo se cargue el contenido que veamos en pantalla<\/strong>, es decir, tendr\u00edamos que hacer scroll con el rat\u00f3n hacia abajo para que se cargara el siguiente bloque de im\u00e1genes. Y con esto lo que se consigue es reducir el tiempo de carga de la tienda online en s\u00ed<\/strong>. \u00bfGenial, verdad?<\/p>\n

En la siguiente web hay una especie de \u201ctest\u201d con 1000 im\u00e1genes para poder comprobar de primera mano que tal funciona este sistema de carga diferida o lazy loading:<\/p>\n

Test 1000 Im\u00e1genes con Lazy Loading<\/a><\/h2>\n

\u00bfD\u00f3nde se puede descargar Prestashop Lazy Loading Module?<\/strong><\/h2>\n

El m\u00f3dulo se puede descargar de forma completamente gratuita desde la p\u00e1gina web de su desarrollador<\/a>, no hace falta registrarse ni nada, tan solo pinchar sobre el enlace que hay en la parte superior:<\/p>\n

Free PrestaShop lazy loading module.<\/a><\/h2>\n

En dicha p\u00e1gina tambi\u00e9n tenemos las caracter\u00edsticas tanto para PrestaShop 1.7 como PrestaShop 1.6:<\/p>\n

Caracter\u00edsticas Destacadas en PrestaShop 1.7<\/em><\/h3>\n