Lazy load Commenti di Wildfire

Sep 05 2020

1. Riepilogo

Non sono riuscito a trovare come fare in modo che il plug-in per i commenti di Wildfire fosse carico lento.

2. Limitazioni

La soluzione deve funzionare per qualsiasi sito statico (esclusivamente HTML / CSS / JavaScript).

3. Problemi

Per prevenire problemi Y. .

1 posto i commenti di Wildfire alla fine dei miei articoli sul mio sito. 1 Wildfire desiderava che quel carico fosse, quando un visitatore del mio sito ha letto il mio articolo fino alla fine. Non è necessario che Wildfire si carichi immediatamente al caricamento della pagina.
Wildfire effettua alcune richieste che a volte possono rallentare notevolmente il caricamento della pagina. È brutto. Ad esempio, il 53% dei visitatori del sito per dispositivi mobili se ne andrà se una pagina web non viene caricata entro tre secondi.

4. MCVE

Repl.it su demo: sorgenti / risultato
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 funziona correttamente per me, ma si carica immediatamente quando viene caricata la pagina. Sarebbe bello se la pagina di Wildfire venisse caricata quando l'utente scorre fino alla fine della pagina.

5. Non aiutato

5.1. Esempio JQuery

1 ho provato il caricamento JS / Script dal plug-in JQuery Example per il caricamento lento.

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 viene comunque caricato quando viene caricata la pagina, anziché dopo che l'utente ha fatto scorrere le pagine fino alla fine.

Inoltre, non sono riuscito a far funzionare questo metodo di esempio JQuery nel mio caso.

5.2. Caricamento lento dei file JavaScript

Ho provato a trovare informazioni sul mio problema. Ad esempio, Stack Overflow 1 ha trovato queste domande:

File JavaScript di caricamento lento
Caricamento lento di JavaScript e JavaScript in linea
caricamento lento di JavaScript

Ma non mi ha aiutato.

6. Non offrire

Per favore, non dirmi che non dovrei usare Wildfire. Stavo scegliendo tra i diversi sistemi di commento e sono giunto alla conclusione che Wildfire è la scelta migliore al momento.

Risposte

1 eisbehr Sep 13 2020 at 10:42

1 caricherà il wildfire.auto.jsfile, ogni volta che il contenitore viene raggiunto dall'utente. Se vuoi usare jQuery.Lazy , il modo più semplice sarebbe creare un semplice caricatore personalizzato e includere il file js nella pagina su quello.