Lazy Load Wildfire Kommentare

Question

1. Zusammenfassung

Ich konnte nicht finden, wie ich das Wildfire-Kommentar-Plugin faul laden konnte.

2. Einschränkungen

Die Lösung muss für jede statische Site (nur HTML / CSS / JavaScript) funktionieren.

3. Probleme

Zur Verhinderung von Y. Problem .

1. 1 Platz Wildfire-Kommentare am Ende meiner Artikel auf meiner Website. 1 Wildfire wollte, dass diese Last war, als ein Besucher meiner Website meinen Artikel bis zum Ende las. Wildfire muss nicht sofort geladen werden, wenn die Seite geladen wird.
2. Wildfire stellt einige Anfragen, die manchmal das Laden der Seite erheblich verlangsamen können. Es ist schlecht Beispielsweise verlassen 53% der Besucher mobiler Websites die Website , wenn eine Webseite nicht innerhalb von drei Sekunden geladen wird.

4. MCVE

• Repl.it auf Demo: Quellen / Ergebnis

• 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 funktioniert erfolgreich für mich, wird jedoch sofort geladen, wenn die Seite geladen wird. Es wäre schön, wenn die Wildfire-Seite geladen würde, wenn der Benutzer zum Ende der Seite blättert.

5. Nicht geholfen

5.1. Beispiel JQuery

Ich habe versucht, JS / Script aus dem JQuery-Beispiel-Plugin zum verzögerten Laden zu laden.

• 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, 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 wird immer noch geladen, wenn die Seite geladen wird, anstatt nachdem der Benutzer bis zum Ende durch die Seiten gescrollt hat.

Außerdem konnte ich diese JQuery-Beispielmethode in meinem Fall nicht zum Laufen bringen.

5.2. Lazy Laden von JavaScript-Dateien

Ich habe versucht, Informationen über mein Problem zu finden. Beispielsweise hat Stapelüberlauf 1 die folgenden Fragen gefunden:

1. Lazy laden JavaScript-Datei
2. Lazy Laden von JavaScript und Inline-JavaScript
3. Lazy Laden von JavaScript

Aber es hat mir nicht geholfen.

6. Nicht anbieten

Bitte sag mir nicht, dass ich Wildfire nicht verwenden soll. 1 wurde die Wahl zwischen den verschiedenen Systemen der Kommentierung und 1 kamen zu dem Schluss , dass Wildfire die beste Wahl im Moment ist.

Answer 1

1 würde die wildfire.auto.jsDatei laden , wenn der Benutzer den Container erreicht. Wenn Sie jQuery.Lazy verwenden möchten , ist es am einfachsten, einen einfachen benutzerdefinierten Loader zu erstellen und die js-Datei in die Seite darauf aufzunehmen.

Ich denke, die Beispiele werden sich selbst erklären. ;)

// 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>