延迟加载 Wildfire 评论答案

【问题标题】：Lazy load Wildfire comments延迟加载 Wildfire 评论
【发布时间】：2020-09-05 12:21:04
【问题描述】：

1。总结

我找不到，我怎样才能让 Wildfire comments plugin 加载懒惰。

2。限制

解决方案必须适用于任何静态（仅 HTML/CSS/JavaScript）网站。

3。问题

为了防止XY problem。

我将 Wildfire cmets 放在我网站上文章的末尾。当我的网站的访问者将我的文章读到最后时，我希望 Wildfire 被加载。页面加载后无需 Wildfire 立即加载。
Wildfire 发出一些请求，有时它们会显着减慢页面加载速度。这不好。例如，如果网页在三秒内未加载，53% 的移动网站访问者会will leave。

4。 MCVE

Repl.it 上的演示：sources/result
index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Wildfire lazy loading</title>
    <script src="KiraWildfire.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/wildfire/dist/wildfire.auto.js" defer></script>
    <style>
    body {
        background: sienna;
        font-size: 7rem;
    }

    .wildfire_thread {
        padding-top: 500rem;
    }
    </style>
</head>

<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Tempora accusamus officia aspernatur iusto numquam facilis quia dolorum, temporibus, nemo fugiat sunt illum veniam reprehenderit laudantium libero quas repellat mollitia eligendi.
    Modi veniam, vero facilis esse totam aut, praesentium voluptatum maxime, nulla sunt repudiandae voluptatibus, sed deleniti consequuntur obcaecati dolorem nostrum quo? Molestias eligendi iusto ut aliquid! Obcaecati suscipit dolorum iste.
    Distinctio iusto delectus excepturi impedit vel at fugiat, tempore ratione qui nostrum perspiciatis mollitia. Vero, labore rerum ipsa aspernatur quos repellendus porro quo repellat, libero itaque maiores ut, eligendi impedit.
    Dolore, eos maiores nesciunt, voluptatem est reprehenderit doloremque earum laudantium. Facilis architecto accusantium iste repudiandae debitis officia corrupti, necessitatibus nobis? Ut in accusantium inventore obcaecati aperiam delectus cupiditate tempora magnam?
    Corrupti molestiae possimus quidem non nihil earum quaerat, accusantium vero sed fuga alias error ducimus dignissimos. Numquam consequatur fugit ipsum saepe laboriosam voluptate repellat, praesentium tenetur magni hic optio cum.
    Amet cupiditate deserunt fugit veritatis, vitae itaque deleniti natus et hic error vero, eligendi perferendis consectetur quasi ducimus exercitationem alias molestias, magni quod ea, blanditiis. Voluptas culpa reiciendis obcaecati exercitationem.
    Corrupti aliquid dolores cupiditate accusantium voluptatum, fugit quae beatae, illum incidunt impedit nisi? A, modi. Veritatis officia amet doloribus eius itaque numquam aspernatur adipisci ex perferendis distinctio neque incidunt, veniam?</div>
    <div class="wildfire_thread"></div>
</body>

</html>

KiraWildfire.js:

var wildfireConfig;

wildfireConfig = function() {
    return {
        databaseProvider: "firebase",
        databaseConfig: {
            apiKey: "my real API key here",
            authDomain: "kirawildfirefirebase.firebaseapp.com",
            databaseURL: "https://kirawildfirefirebase.firebaseio.com",
            projectId: "kirawildfirefirebase",
            storageBucket: "kirawildfirefirebase.appspot.com",
            messagingSenderId: "my real sender ID here"
        },
        theme: "dark",
        locale: "en"
    };
};

Wildfire 成功地为我工作，但它会在页面加载时立即加载。如果在页面用户滚动到页面末尾时加载 Wildfire，那就太好了。

5。没有帮助

5.1。 jQuery 懒人

我尝试了 JS/Script loader 和 JQuery Lazy plugin 的延迟加载。

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Wildfire lazy loading</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/jquery.lazy/latest/jquery.lazy.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/jquery.lazy/latest/jquery.lazy.plugins.min.js" defer></script>
    <script src="KiraLazy.js" defer></script>
    <style>
    body {
        background: sienna;
        font-size: 7rem;
    }

    .wildfire_thread {
        padding-top: 500rem;
    }
    </style>
</head>

<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Tempora accusamus officia aspernatur iusto numquam facilis quia dolorum, temporibus, nemo fugiat sunt illum veniam reprehenderit laudantium libero quas repellat mollitia eligendi.
    Modi veniam, vero facilis esse totam aut, praesentium voluptatum maxime, nulla sunt repudiandae voluptatibus, sed deleniti consequuntur obcaecati dolorem nostrum quo? Molestias eligendi iusto ut aliquid! Obcaecati suscipit dolorum iste.
    Distinctio iusto delectus excepturi impedit vel at fugiat, tempore ratione qui nostrum perspiciatis mollitia. Vero, labore rerum ipsa aspernatur quos repellendus porro quo repellat, libero itaque maiores ut, eligendi impedit.
    Dolore, eos maiores nesciunt, voluptatem est reprehenderit doloremque earum laudantium. Facilis architecto accusantium iste repudiandae debitis officia corrupti, necessitatibus nobis? Ut in accusantium inventore obcaecati aperiam delectus cupiditate tempora magnam?
    Corrupti molestiae possimus quidem non nihil earum quaerat, accusantium vero sed fuga alias error ducimus dignissimos. Numquam consequatur fugit ipsum saepe laboriosam voluptate repellat, praesentium tenetur magni hic optio cum.
    Amet cupiditate deserunt fugit veritatis, vitae itaque deleniti natus et hic error vero, eligendi perferendis consectetur quasi ducimus exercitationem alias molestias, magni quod ea, blanditiis. Voluptas culpa reiciendis obcaecati exercitationem.
    Corrupti aliquid dolores cupiditate accusantium voluptatum, fugit quae beatae, illum incidunt impedit nisi? A, modi. Veritatis officia amet doloribus eius itaque numquam aspernatur adipisci ex perferendis distinctio neque incidunt, veniam?</div>
    <script data-src="KiraWildfire.js"></script>
    <script data-src="https://cdn.jsdelivr.net/npm/wildfire/dist/wildfire.auto.js"></script>
    <div class="wildfire_thread"></div>
</body>

</html>

KiraLazy.js:

$(function() {
    $("script[data-src]").Lazy();
});

Wildfire 仍会在页面加载时加载，而不是在用户滚动页面到最后之后加载。

另外，我无法让 this JQuery Lazy 方法在我的情况下工作。

5.2。延迟加载 JavaScript 文件

我试图查找有关我的问题的信息。例如，我发现了这些 Stack Overflow 问题：

但这对我没有帮助。

6。不提供

请不要告诉我，我不应该使用 Wildfire。我是choosing 介于不同的评论系统之间，我得出的结论是，Wildfire 是目前最好的选择。

【问题讨论】：

标签： javascript jquery lazy-loading

【解决方案1】：

每当用户到达容器时，我都会加载wildfire.auto.js 文件。如果你想使用jQuery.Lazy，最简单的方法是创建一个简单的custom loader，并将js文件包含在上面的页面中。

我认为这个例子是自我解释的。 ;)

// wildfire config on window.wildfireConfig
var wildfireConfig= () => {
  return {
    databaseProvider: "firebase",
    databaseConfig: {
      apiKey: "my real API key here",
      authDomain: "kirawildfirefirebase.firebaseapp.com",
      databaseURL: "https://kirawildfirefirebase.firebaseio.com",
      projectId: "kirawildfirefirebase",
      storageBucket: "kirawildfirefirebase.appspot.com",
      messagingSenderId: "my real sender ID here"
    },
    theme: "dark",
    locale: "en"
  };
};

jQuery($ => {
  // initialize jquery.lazy only on wildfire container
  $('div.wildfire_thread').Lazy({
    // create a custom loader function what only load the wildfire script
    // when reaching the comment container
    comments: (element, response) => {
      $.getScript('https://cdn.jsdelivr.net/npm/wildfire/dist/wildfire.auto.js', () => {
        response(true);
      });
    }
  });
});

.content {
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js"></script>

<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Tempora accusamus officia aspernatur iusto numquam facilis quia dolorum, temporibus, nemo fugiat sunt illum veniam reprehenderit laudantium libero quas repellat mollitia eligendi.
Modi veniam, vero facilis esse totam aut, praesentium voluptatum maxime, nulla sunt repudiandae voluptatibus, sed deleniti consequuntur obcaecati dolorem nostrum quo? Molestias eligendi iusto ut aliquid! Obcaecati suscipit dolorum iste.
Distinctio iusto delectus excepturi impedit vel at fugiat, tempore ratione qui nostrum perspiciatis mollitia. Vero, labore rerum ipsa aspernatur quos repellendus porro quo repellat, libero itaque maiores ut, eligendi impedit.
Dolore, eos maiores nesciunt, voluptatem est reprehenderit doloremque earum laudantium. Facilis architecto accusantium iste repudiandae debitis officia corrupti, necessitatibus nobis? Ut in accusantium inventore obcaecati aperiam delectus cupiditate tempora magnam?
Corrupti molestiae possimus quidem non nihil earum quaerat, accusantium vero sed fuga alias error ducimus dignissimos. Numquam consequatur fugit ipsum saepe laboriosam voluptate repellat, praesentium tenetur magni hic optio cum.
Amet cupiditate deserunt fugit veritatis, vitae itaque deleniti natus et hic error vero, eligendi perferendis consectetur quasi ducimus exercitationem alias molestias, magni quod ea, blanditiis. Voluptas culpa reiciendis obcaecati exercitationem.
Corrupti aliquid dolores cupiditate accusantium voluptatum, fugit quae beatae, illum incidunt impedit nisi? A, modi. Veritatis officia amet doloribus eius itaque numquam aspernatur adipisci ex perferendis distinctio neque incidunt, veniam?
</div>
 
 <div class="wildfire_thread" data-loader="comments">Loading comments ...</div>

【讨论】：