Skip to main content

Script Defer Iframe Video Youtube (Fast Loading)

Berbagi script defer iframe atau defer parsing iframe youtube js (fast loading) -  Mungkin masih ada yang ingin bertanya "apa itu defer iframe video youtube (youtube embed)?", Dalam bahasa inggris "Defer" artinya ialah menunda, jadi yang dimaksud dengan defer iframe youtube embed adalah; menunda pemuatan iframe dari youtube embed dengan proteksi sebuah javascript supaya loading menjadi lebih cepat. Script atau javascript yang berfungsi untuk menunda pemuatan iframe dari youtube embed ini lebih dikenal dengan sebutan "defer parsing of javascript youtube embed js", Script ini awalanya saya temukan dikala mengintip akun github para programer, ada banyak pengetahuan yang saya temukan disana untuk mempercepat loading situs web dan salah satunya ialah dengan menunda pemuatan iframe memakai script "defer parsing youtube js" ini.
jadi yang dimaksud dengan defer iframe youtube embed ialah Script Defer Iframe Video Youtube (Fast Loading)
Defer parsing of javascript youtube embed - javascript

Cara Kerja Defer Parsing Youtube JS

Javascript defer parsing youtube embed berfungsi untuk memberitahukan kepada browser untuk melewati pemuatan iframe video embed sebelum loading situs selesai, namun tetap menampilkan nya sebagai file penting dari konten tersebut dan kemudian memuatnya setalah di klik (play).

Script Defer Iframe dan Cara Menggunakan Nya

Simpan isyarat lengkap defer_parsing_youtube_embed.js ini di atas epilog body html situs web (diatas isyarat </body>).
<script type='text/javascript'>
//<![CDATA[
function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i = 0; i < vidDefer.length; i++) {
        if (vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src')); } } }
window.onload = init;
//]]>
</script>
Kemudian copy isyarat embed video youtube yang akan disematkan dan ubah src=" menjadi src="" data-src=" kemudian kemudian sematkan kedalam konten (artikel) melalu mode pengeditan html.

example:
<iframe width="854" height="480" src="https://www.youtube.com/embed/-U21R16Vvwk" frameborder="0" allowfullscreen></iframe>
Kode semat diatas ialah adalah isyarat original embed video youtube tanpa pemutar otomatis, sesudah diterapkan defer iframe maka akan menjadi ibarat berikut ini;
<iframe width="854" height="480" src="" data-src="https://www.youtube.com/embed/-U21R16Vvwk" frameborder="0" allowfullscreen></iframe>
Demo defer parsing youtube embed js silahkan lihat pada video di bawah ini, silahkan refresh artikel ini dan perhatikan video akan dimuat sesudah loading situs selesai.
Iframe dari pihak ketiga ibarat vimeo, etc, youtube, facebook, twitter, ig dan lain-lain yang disematkan (embed) pada konten situs tentunya akan menambah beban loading terhadap halaman web tersebut. Dengan menarapkan metode "defer iframe" atau penundaan pemuatan iframe maka video yang disematkan kedalam konten situs tidak lagi membebani browser terlalu berat sehinngga loading situs menjadi lebih cepat (normal sebelum video ditambahkan). Demikian "Script Defer Iframe Video Youtube (Fast Loading)" serta cara memakai nya semoga bermanfaat dan menambah ilmu pengetahuan perihal blogging dan javascript.
Labels:

Comments

Post a Comment

Popular posts from this blog

Widget Contact Form Responsive

Widget Contact Form Responsive - Contact Form atau Contact Us merupakan satu dari beberapa widget penting yang harus ada di setiap laman website termasuk situs blogger, widget contact form merupakan mediator yang menghubungkan antara visitor dengan pengelola situs, Contact form (formulir kontak) biasanya dipakai untuk mengirim pesan berupa kritik, saran, pemesanan pemasangan iklan dan lain-lain. selain itu contact form juga berfungsi sebagai penyaring spam atau malware yang kemungkinan dikirim oleh visitor badung ke e-mail pengelola situs. Platform blogger bekerjsama sudah menyediakan widget contact form untuk situs-situs blog, namun tampilan contact form yang disediakan masih sangat sederhana "default" pengelola situs harus menyesuikan style contact form nya sendiri dengan sedikit penambahan css untuk menciptakan tampilan contact form menjadi lebih elegant. Widget Contact Form Responsive Cara Membuat Laman Contact Form Blogger Login ke Blogger dan buat satu laman ...
Post a Comment
Read more

Cara Buat Tombol Share Sticky Bottom (Melayang Dibawah)

Cara Membuat Share Button Sticky Bottom Blogger - Akhir-akhir ini berbagai variasi tombol share muncul ke pasaran dunia cyber " website & blog " tentunya, dan yang paling terkenal ialah tombol share sticky bottom dan sidebar . Gaya yang lainnya tombol share drop-down. Pada artikel ini aku akan membahas Cara menciptakan tombol share sticky bottom (melayang di bawah) pada perangkat mobile (Handphone) dan tombol share sticky sidebar "melayang di samping jikalau di lihat melalui PC. Adapun tombol share yang akan kita buat merupakan tombol share (share button) yang ringan "sticky bottom" dengan sedikit script namun sangat responsive pada perangkat seluler. Sehingga tidak memberi efek jelek pada loading situs anda. Langsung saja simak langkah-langkah cara menciptakan tombol share sticky bottom berikut ini. Kunjungi laman penyedia tombol share yaitu www.addthis.com Silahkan login dengan dengan e-mail atau facebook anda untuk masuk ke dashboard add...
Post a Comment
Read more

Cara Paralel Exhaust Dengan Lampu

Paralel Hexos Dengan Lampu Paralel Exhaust Dengan Lampu maksudnya yaitu menggabungkan antara exhaust atau fan dengan lampu ke satu switch. Umumnya pada benda electronic menyerupai exhaust memakai jenis kabel NYY isi 3 yaitu Phase, Netral dan Ground sebagai penghubung. Sedangkan Pada instalasi listrik fitting lampu hanya memnggunakan kabel Jenis NYA sebanyak 2 kabel saja yaitu kabel Phase dan Netral saja. Lalu bagaimana " cara memparalel exhaust dengan lampu? " Bahasa singkat dalam teori instalasi listrik " Gabungkan antara netaral exhaust ke netral lampu dan phase ke phase sedangkan kabel ground hubungkan dengan kabel ground pada sumber ground ". Bagaimana mengetahui kabel phase, netral dan ground pada benda electronic menyerupai exhaust? simak panduan instalasi listrik di bawah ini. Warna Kabel NYY Pada barang electronic menyerupai exhaust umumnya ada tiga warna yaitu Biru, Coklat, Dan Kuning atau Coklat, Hitam dan putih.  Biru sebagai kabel Phase ...
Post a Comment
Read more