延迟加载Wildfire评论 5.1 jQuery懒惰 5.2延迟加载JavaScript文件

问题描述

1。摘要

我找不到如何使Wildfire comments plugin处于延迟加载状态。

2。局限性

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

3。问题

用于防止XY problem 。

我在网站上的文章末尾添加了Wildfire评论。当网站的访问者阅读完我的文章时，我希望加载Wildfire。页面加载后，无需Wildfire立即加载。
Wildfire发出了一些请求，有时它们可能会大大减慢页面加载速度。这不好。例如，如果某个网页在三秒钟内未加载，则有53％的移动网站访问者will leave。

4。 MCVE

副本演示：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，那就太好了。

Wildfire comments

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/[email protected]/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,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文件

我试图找到有关我的问题的信息。例如，我发现了以下堆栈溢出问题：

但这对我没有帮助。

6。不提供

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

解决方法

无论何时用户到达容器，我都会加载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>

javascript jquery lazy-loading