使用 javascript 延迟加载 Elementor 部分

Posted 2023-02-19

【中文标题】使用 javascript 延迟加载 Elementor 部分

【英文标题】：Lazy Load Elementor Section with javascript

【发布时间】：2021-04-19 22:32:47

【问题描述】：

有没有办法用javascript延迟加载wordpress elementor部分，以便首先页面加载在一秒钟内，然后所有部分依次延迟加载。

【问题讨论】：

嗨 Nadim，欢迎来到 ***。请注意，该论坛旨在就可重现的示例提出特定的代码问题，而不是询问工具推荐（请参阅What topics can I ask about here? 帖子的第 4 点）。这样的话题最好在Software Reccomendations上提问。

我也在寻找相同的解决方案。 @AxelKöhler，这不是软件推荐，我们正在寻找具体解决方案的代码sn-p。

@amarinediary 这是关于部分，而不是图像。

【参考方案1】：

我来到这里是因为我的部分包含一个短代码，其中包含一些繁重的 html，从某种意义上说，由于 JavaScript，它会大大减慢页面加载速度，因为这些是 slick.js滑块，我在主页上找到了其中的三个。我说的滑块插件是Woo Product Slider and Carousel with category。

我现在的想法是将短代码包装到我自己的短代码中，并确保触发 JS 来初始化滑块，如下所示：

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

heavy 短代码是这样实现的：

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

它只是将编码的 HTML 存储在全局 heavy 对象中，一旦您使用页面底部的此 JS 将其相应的 div 滚动到视图中，就可以进行初始化（确保它在最后一刻执行可能）：

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

是的，此解决方案不适用于部分，但它应该适用于您可以封装在短代码中的任何内容。它不是很漂亮并且会干扰其他延迟加载插件，但它很实用，甚至可以与 W3Cache 一起使用。

这肯定不适用于任何内容，您必须制定所需的步骤并将它们放入短代码的onload 事件中，但我希望它对任何人都有帮助。