Lazy Load Elementor-Abschnitt mit Javascript

Gibt es eine Möglichkeit, WordPress-Elemente oder -Abschnitte mit Javascript zu laden, sodass zuerst die Seite in einer Sekunde geladen wird und dann alle Abschnitte nacheinander faul geladen werden.

Ich bin hierher gekommen, weil mein Abschnitt einen Shortcode enthielt, der einiges an schwerem HTML enthalten würde, in dem Sinne, dass er das Laden der Seite aufgrund von JavaScript so massiv verlangsamen würde, weil dies der Fall ist glatt.js Slider und ich habe drei davon auf meiner Homepage. Das Slider-Plugin, von dem ich spreche, ist Woo Product Slider und Karussell mit Kategorie.

Meine Idee war nun, den Shortcode in meinen eigenen Shortcode zu verpacken und sicherzustellen, dass das JS ausgelöst wird, um die Schieberegler wie folgt zu initialisieren:

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

Das schwer Shortcode wird wie folgt implementiert:

/**
 * 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();
    }
});

Es speichert einfach das HTML, das in der Datei global codiert ist heavy Objekt, das initialisiert werden kann, sobald Sie das entsprechende div in die Ansicht scrollen, indem Sie dieses JS unten auf der Seite verwenden (stellen Sie sicher, dass es im allerletzten möglichen Moment ausgeführt wird):

(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();
})();

Ja, diese Lösung funktioniert nicht für Abschnitte, aber sie sollte für alle Inhalte funktionieren, die Sie in einen Shortcode kapseln können. Es ist nicht sehr schön und kann andere Lazy-Load-Plugins stören, aber es ist funktional und funktioniert sogar mit W3Cache.

Das wird sicherlich nicht mit allen Inhalten funktionieren, Sie müssen die erforderlichen Schritte ausarbeiten und in die einfügen onload Ereignis des Shortcodes, aber ich hoffe, es wird trotzdem jedem helfen.