Cómo implementar Lazy Load en una página HTML a partir de un sitio WP

Hola compañer@s... Estoy intentando crear un sitio estático html a partir de mi Sitio Wordpress, pero no funciona el Lazy Load... En el sitio WP utilizo el plugin a3 Lazy Load, pero al crear la versión html, las imágenes y vídeos no cargan...

En jQuery Lazy Load Plugin se explica cómo añadir Lazy Load a una página html, pero si no he entendido mal, tendría que añadir una clase a cada etiqueta IMG del sitio, lo cual es demasiado... por lo que probablemente la única forma viable de crear un sito html con lazy load, a partir de un sitio WP, sea encontrar un plugin para el sitio WP, cuyo código generado funcione también en la versión estática...

¿Voy bien? ¿Alguna vez habéis creado un sitio estático a partir de un WP?

Gracias... Feliz semana... Abrazo...

En el link que dejás, donde está el tutorial de uso indica:


No necesariamente debas darle una clase a todas las imágenes, podés cambiar ese img.lazy llamando a la clase/ID que contenga las imágenes. Por ejemplo: #contenedor img.

Misterio

ramifenili dijo:

En el link que dejás, donde está el tutorial de uso indica:

Insertar CODE, HTML o PHP:

$(document).ready(function() {
 $("[B][COLOR="#FF0000"]img.lazy[/COLOR][/B]").lazyload({
        effect : "fadeIn",
   });
});

No necesariamente debas darle una clase a todas las imágenes, podés cambiar ese img.lazy llamando a la clase/ID que contenga las imágenes. Por ejemplo: #contenedor img.

Hacer clic para expandir...

Gracias... En ese ejemplo, el código de la imagen es el siguiente:

<img class="sf-lazy lazy" src="javascript:void(0)" data-sf-srcset="imagencarga.jpg 450w, imagencarga.jpg 681w, imagencarga.jpg 1024w, imagencarga.jpg 1366w" data-sf-src="imagencarga.jpg" alt=""><noscript><img alt="" src="imagencarga.jpg"></noscript>

Por lo que he leído, la etiqueta <noscript> es para los navegadores que han deshabilitado scripts... Y la clase aplicada a la img es "sf-lazy lazy" que estará definida en un archivo css del plugin... No creo por tanto que funcione como dices...

En cualquier caso, decía que el código generado por el plugin "a3 Lazy Load" que utilizo en mi WP, no funciona en la página html (el clásico círculo dando vueltas, sin llegar a cargar la imagen) pero esto es un misterio de lo más curioso, ya que el código de la página html (tanto el de las imágenes como el de las llamadas a los archivos del plugin) es idéntico al de la página php ¿Qué particularidad podría haber en la html para que el mismo código no funcione?

- - - Actualizado - - -

Gracias compañer@s... El plugin no funcionaba en la versión estática (tampoco funcionaba Divi) porque los DNS de mi dominio apuntaban hacia Cloudflare (la versión gratuita no cachea html, y supongo que esa es la razón) Al cambiar los DNS para que apunten hacia mi host, la versión estática funciona correctamente, incluído Lazy Load...

Abrazo...