Hai, kali ini saya akan membagikan cara sederhana untuk memasang lazyload on scroll pada pemuatan javascript eksternal.
Teknik lazyload biasa digunakan untuk optimasi loading pada website termasuk yang berbasis blogger agar tidak memberatkan loading diawal pemuatan halaman.
Seperti yang kita ketahui, javascript merupakan salah satu masalah yang berdampak pada pemuatannya. Apalagi yang pemuatannya dari link eksternal.
Tidak jarang, optimasi dengan mengurangi resource javascript adalah salah satu solusi terbaik untuk menghindari pemuatannya yang cukup berat.
Namun, pastinya banyak web yang harus atau menggunakannya agar websitenya dapat berjalan seperti yang diharapkan.
Misalnya pemuatan jquery, kode javascript adsense, dll. Yang mengharuskan menyertakan kode sumber eksternal dari situsnya.
Walaupun menggunakan fungsi async ataupun fungsi defer yang dirasa masih belum memuaskan pada waktu loading halaman kamu bisa menerapkan cara ini.
Script lazyload eksternal javascript
Sebenarnya cukup simple, kamu hanya menambahkan link eksternal javascript kamu kedalam script dibawah ini :
<script>
window.onscroll = function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'https://resource.com/javascript.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
</script>Cara kerjanya, ketika kamu membuka halaman maka pemuatan javascript akan tertunda atau tidak akan berjalan.
Dan ketika kamu mengscroll halaman tersebut, baru javascript eksternal tadi akan mengload dari resource tersebut.
Cara ini bisa dibilang cukup bahkan sangat efektif untuk mengurangi beban javascript eksternal, terlebih lagi pada website yang harus menggunakan resource yang berat.
Sekian, Membuat JavaScript Eksternal Lazyload Onscroll. Semoga bermanfaat.