Lazy load Wildfire yorumlar

Question

1. Özet

1 bulamadım, nasıl yapabilirim ki Wildfire yorum eklentisi tembel yük oldu.

2. Sınırlamalar

Çözüm, herhangi bir statik (yalnızca HTML / CSS / JavaScript) site için çalışmalıdır.

3. Sorunlar

Y. problemini önlemek için .

1. Wildfire yorumlarını sitemdeki makalelerimin sonuna yerleştir. 1 Wildfire, sitemin ziyaretçisi makalemi sonuna kadar okuduğunda bu yükün olmasını istiyor. Wildfire'ın sayfa yüklendiğinde hemen yüklenmesine gerek yok.
2. Wildfire, bazen sayfanın yüklenmesini önemli ölçüde yavaşlatabilecek bazı isteklerde bulunur. Bu kötü. Örneğin, bir web sayfası üç saniye içinde yüklenmezse mobil site ziyaretçilerinin% 53'ü ayrılacaktır .

4. MCVE

• Demoda Repl.it: kaynaklar / sonuç

• 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 benim için başarılı bir şekilde çalışıyor, ancak sayfa yüklendiğinde hemen yükleniyor. Wildfire sayfasının, kullanıcı sayfanın sonuna kaydırdığında yüklenmesi güzel olurdu.

5. Yardım edilmedi

5.1. Örnek JQuery

1, geç yükleme için JQuery Example eklentisinden JS / Script yüklemesini denedi .

• 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, kullanıcı sayfaları sonuna kadar kaydırdıktan sonra değil, sayfa yüklendiğinde hala yüklenir.

Ayrıca, benim durumumda bu JQuery Örneği yönteminin çalışmasını sağlayamadım .

5.2. Geç yükleme JavaScript dosyaları

Sorunum hakkında bilgi bulmaya çalıştım. Örneğin, Stack Overflow 1 şu soruları buldu:

1. Tembel yükleme JavaScript dosyası
2. Geç yükleme JavaScript ve satır içi JavaScript
3. tembel yükleme JavaScript

Ama bana yardımcı olmadı.

6. teklif etmeyin

Lütfen bana Wildfire kullanmamam gerektiğini söylemeyin. 1 edildi seçme yorumlama farklı sistemler arasında ve 1 Wildfire anda en iyi seçim olduğunu sonucuna vardı.

Answer 1

1 wildfire.auto.js, kullanıcı konteynere her eriştiğinde dosyayı yükler . JQuery.Lazy'i kullanmak istiyorsanız , en kolay yol basit bir özel yükleyici oluşturmak ve js dosyasını bu sayfadaki sayfaya eklemek olacaktır.

Örneklerin kendini açıklayacağını düşünüyorum. ;)

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