Cara Penggunaan Lazy Load JavaScript External

Assalamualaikum, Bertemu lagi ya kawan, Kali ini saya akan membincangkan tentang cara penggunaan lazy load javascript external.

Apa itu lazy load?
Lazyload adalah istilah yang diberikan oleh pemaju untuk skrip / kod yang dilaksanakan pada akhir selepas halaman dimuatkan. Perkataan "Lazy" sendiri bermaksud malas, menggambarkan kerja yang dilakukan lazily dan biasanya dilakukan pada akhir. Dalam pengaturcaraan, terutamanya reka bentuk web, memasang kod Lazyload mempunyai banyak faedah, ia lebih disyorkan kerana sangat berguna untuk kelajuan memuatkan halaman. Jadi laman web ini tidak terlalu berat ketika memuatkan pada mulanya. Lazyload boleh menambah pengalaman pengguna (UX), mempercepat laman web dan skor Gt-metrix hijau atau wawasan halamanpeed, dan menambah nilai pada halaman SEO.

Namun hari ini saya cuma akan kongsikan code untuk lazy load javascript external, Code yang lainya seperti lazyload image, Lazyload Adsense dan lazyload CSS tlah saya kongsikan sebelum ini, Anda bole cari dengan menggunakan search box yang tersedia.

Baikla kita teruskan sahaja ke pemasangan lazyload javascript external ini.

LazyLoad JavaScript

Selalunya akan di gunakan untuk javascript external secara umumnya.

Berikut dua cara Penggunaan lazyload javascript external

1. lazyload javascript external v1

<script>//<![CDATA[//
    function loadJavascript() {
        var e = document.createElement("script");
        e.src = "URL_JAVASCRIPT_ANDA", document.body.appendChild(e)
    }
    window.addEventListener ? window.addEventListener("load", loadJavascript, !1) : window.attachEvent ? window.attachEvent("onload", loadJavascript) : window.onload = loadJavascript;
//]]>//</script>

Kod Lazyload JS di atas akan mencipta javascript luaran apabila semua dokumen telah dimuatkan

2. lazyload javascript external v1

<script>//<![CDATA[//
var loadAfterSroll = false;
window.addEventListener("scroll", function () {
    if ((document.documentElement.scrollTop != 0 && loadAfterSroll === false) || (document.body.scrollTop != 0 && loadAfterSroll === false)) {
        (function () {
            var ad = document.createElement('script');
            ad.type = 'text/javascript';
            ad.async = true; // Matikan Asyncronous jika tidak memerlukan async
            ad.src = 'URL_JAVASCRIPT_ANDA';
            var sc = document.getElementsByTagName('script')[0];
            sc.parentNode.insertBefore(ad, sc);
        })();
        loadAfterSroll = true;
    }
}, true);
//]]>//</script>

Kod Lazyload JS seperti ini mempunyai cara kerja dengan melaksanakan skrip apabila anda scrolling pada halaman.

Berikut adalah Cara Penggunaan Lazy Load JavaScript External yang anda harus tahu, Baiklah sampai di sini sahaja posting saya tentang Cara Penggunaan Lazy Load JavaScript External.