延迟加载 Wildfire 评论

Question

1。摘要

我找不到，我怎样才能使 Wildfire comments plugin 加载延迟。

2。限制

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

3。问题

防止XY problem.

我将 Wildfire 评论放在我网站上文章的末尾。我希望当我网站的访问者阅读完我的文章时，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 from 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 惰性方法适用于我的情况。

5.2。延迟加载 JavaScript 个文件

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

Lazy load javascript file
Lazy loading JavaScript and Inline JavaScript
lazy loading javascript

但这对我没有帮助。

6.不提供

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

Answer 1

只要用户到达容器，我就会加载 wildfire.auto.js 文件。如果你想使用 jQuery.Lazy, the easiest way would be to create a simple 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>

延迟加载 Wildfire 评论

Lazy load Wildfire comments

javascript

jquery

lazy-loading