Asynchronous Javascript Pada Blogger Tidak berjalan pada Firefox ?

Mengatasi Asynchronous Javascript Pada Blogger

Bagi para pengguna Template XML Blogger yang berniat untuk set javascript dari jQuery Library menjadi async (Asynchronous). mungkin ini di maksudkan Mengatasi Render-Blocking Javascript alhasil script jquery yang ada malah tidak berjalan pada peramban tertentu semisal firefox padahal kalau di buka pada browser Chrome/Opera berjalan lancar. lalu apa masalahnya ?
kemungkinan terjadi karena template Blogger anda valid HTML5. kok bisa ?
coba lihat pada template blogger anda temukan code <head>. tapi untuk kebutuhan agar valid HTML5 / hidden CSS Bundle Blogger biasanya kalian rubah menjadi <head> dan penutupnya menjadi </head>.
nah agar script jquery berjalan kembali cukup ganti code tadi menjadi <head> kembali tapi akan membuat template anda tidak valid HTML5 lagi bahkan Render-Blocking bertambah pada CSS Bundle BLogger.
Terus caranya agar Asynchronous Javascript Jquery tetap berjalan namun valid HTML5 juga bagaimana ?
Pertama lihat apakah anda sudah menempatkan script jquery librarynya. jika belum itulah penyebab utama kenapa script jquery lain tidak berjalan ^_^.
coba pasang script jquery librarynya yang sudah di set Async. (jika yang sudah ada abaikan)

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' async='async' type='text/javascript'></script>

bisa juga seperti ini
diskusikan jika ada masalah pada script ini.

<script type='text/javascript'>
(function() {
var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true; // set true untuk async jquery
    s.src = ('https:' == document.location.protocol ? 'https' : 'http') +
       '://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

Tempatkan code di atas biasanya penempatan sebelum penutup <head>.
contoh:

<head>

//Script Pasang di antara Tag Head

</head>

Sekarang memasuki kasus permasalahnnya.
Ask. "Saya sudah pasang jQuery di atas dan script jQuery yang sudah ada tidak berjalan pada firefox ?".
itu di karenakan karena tidak adanya fungsi callback script jQuery dimana penutup tag head yang sudah di rubah menjadi <head> menjadikan script librarynya tidak di ketahui penempatannya oleh Firefox.
cara mengatasinya.
script jQuery yang sudah ada tinggal tambahkan callback onload ceperti ini.

window.onload = function () {

//scipt jQuery anda
// seperti back to top atau apa sajalah yang berkaitan dengan jQuery

};

contoh penggunaanya misal script yang sudah ada pada bagian </body> seperti ini

<script type='text/javascript'>
//<![CDATA[
window.onload = function () {

    $('tagID 1, tagID 2').each(function() {
       //script lainnya
    });

    or

    function() {
      //script lainnya
    }

};//penutup onload
//]]>
</script>

Seharusnya dengan penambahan script di atas script jQuery anda akan berjalan lancar di semua Browser.
Tinggal kalian test saja bagaimana hasilnya dan buka pada beberapa peramban browser anda. apa sudah tidak ada masalah atau masih tidak berjalan.
cara lain mengatasi Render-Blocking Pada CSS atau Javascript saya buat pada artikel terpisah.
Cara Mengatasi Render-Blocking Javascript DI PageSpeed Insights
selebihnya kalian bisa diskusikan permasahannya

Asynchronous Javascript Pada Blogger Tidak berjalan pada Firefox ?

Share Article :