Sección Lazy Load Elementor con javascript

3 minutos de lectura

¿Hay alguna forma de cargar de forma diferida la sección elementor de wordpress con javascript para que primero la página se cargue en un segundo y luego toda la sección se cargue de forma diferida o tras otra?

  • Hola Nadim, bienvenido a StackOverflow. Tenga en cuenta que este foro está diseñado para hacer preguntas de código específicas sobre ejemplos reproducibles, y no para preguntar sobre recomendaciones de herramientas (consulte el punto 4 de la publicación ¿Sobre qué temas puedo preguntar aquí?). Es mejor preguntar sobre temas como ese Recomendaciones de software.

    – Axel Köhler

    14/01/2021 a las 21:57

  • También estoy buscando la misma solución. @AxelKöhler, no se trata de recomendación de software, estamos buscando un fragmento de código de una solución específica.

    – Vicky P.

    25 de junio de 2021 a las 9:41

  • @amarinediary se trata de secciones, no de imágenes.

    – Martín Braun

    15 de diciembre de 2021 a las 15:24

Avatar de usuario de Martin Braun
Martín Braun

Vine aquí porque mi sección contenía un código abreviado que contenía algo de HTML pesado en el sentido de que ralentizaría la carga de la página de manera masiva, debido a JavaScript, porque estos son slick.js controles deslizantes y obtuve tres de ellos en mi página de inicio. El complemento deslizante del que estoy hablando es Woo Product Slider y carrusel con categoría.

Mi idea ahora era envolver el código corto en mi propio código corto y asegurarme de activar el JS para inicializar los controles deslizantes así:

[heavy onload="wcpscwc_product_slider_init()"][wcpscwc_pdt_slider cats="133" limit="12"][/heavy]

Él pesado shortcode se implementa así:

/**
 * Heavy
 * 
 * Lazy load heavy elements
 */
add_shortcode('heavy', function ($atts = [], $content = null) {
    if (
        strpos($_SERVER['REQUEST_URI'], '/post.php') !== false ||
        strpos($_SERVER['REQUEST_URI'], 'elementor') !== false
    ) {
        return $content;
    } else {
        $atts = shortcode_atts([
            'offset' => '100',
            'onload' => ''
        ], $atts);

        ob_clean();
        ob_start();

        $id = wp_generate_uuid4();
?>
        <div id="<?php echo $id; ?>" class="heavy-container" data-offset="<?php echo $atts['offset']; ?>" onload="<?php echo $atts['onload']; ?>"></div>
        <script type="text/javascript">
            (function() {
                window.heavy = window.heavy || {};
                window.heavy["<?php echo $id; ?>"] = <?php echo json_encode(do_shortcode($content)); ?>;
            })();
        </script>
<?php
        return ob_get_clean();
    }
});

Simplemente almacena el HTML codificado en el global heavy objeto, listo para ser inicializado una vez que desplace su div correspondiente a la vista usando este JS en la parte inferior de la página (asegúrese de que se ejecute en el último momento posible):

(function () {
  window.heavy = window.heavy || {};
  var heavyContainers = document.querySelectorAll(".heavy-container");
  var attemptInitHeavyElements = function () {
    var heavyContainersToLoad = [];
    heavyContainers.forEach(function (container) {
      if (
        window.heavy[container.id] &&
        container.getBoundingClientRect().top - container.dataset.offset <
          window.innerHeight
      ) {
        heavyContainersToLoad.push(container);
      }
    });
    if (heavyContainersToLoad.length) {
      heavyContainersToLoad.forEach(function (container) {
        container.innerHTML = window.heavy[container.id];
        container.onload && container.onload();
        delete window.heavy[container.id];
        container.classList.add("heavy-container--loaded");
      });
    }
  }
  document.addEventListener("scroll", attemptInitHeavyElements);
  attemptInitHeavyElements();
})();

Sí, esta solución no funcionará para secciones, pero debería funcionar para cualquier contenido que pueda encapsular dentro de un código abreviado. No es muy bonito y puede interferir con otros complementos de carga diferida, pero es funcional e incluso funciona con Caché W3.

Esto seguramente no funcionará con ningún contenido, debe realizar los pasos necesarios y ponerlos en el onload evento del shortcode, pero espero que ayude a alguien de todos modos.

¿Ha sido útil esta solución?