{"id":138,"date":"2022-05-24T04:15:39","date_gmt":"2022-05-24T04:15:39","guid":{"rendered":"https:\/\/rizkiakmanda.com\/?p=138"},"modified":"2022-05-24T04:16:37","modified_gmt":"2022-05-24T04:16:37","slug":"perbedaan-window-onload-dan-document-ready","status":"publish","type":"post","link":"https:\/\/rizkiakmanda.com\/?p=138","title":{"rendered":"Perbedaan Window onload dan document ready"},"content":{"rendered":"

Window onload dan document ready event bisa membuat kita bingung, dan menggunakan salah satunya bisa membuat masalah dikode yang mungkin susah untuk dicari tahu karena perbedaannya yang tipis diantara keduanya. Mari kita bahas satu per satu.<\/p>\n

    \n
  1. Window load event
    \nWindow load event berjalan saat seluruh halaman web telah selesai dimuat, menunggu semua element, konten dan termasuk juga resources yang dibutuhkan. Contoh untuk element tersebut adalah semua tag HTML yang berupa h1 tag, p tag, dan lain lain. Jika untuk resources atau konten contohnya stylesheets css, library js, gambar, video dan lain lain. Contoh untuk defined window load event sebagai berikut :
    \n\t\t\t
    \n
    \n
    \n
    <\/div>\n
    <\/div>\n
    <\/div>\n <\/div>\n
    \n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n 
    <\/p>\n
    window.addEventListener(\u201dload\u201d, (event) => {\r\n\t\/\/ insert code here\r\n});\r\n<\/pre>\n
    <\/code><\/pre>\n\t\t\t<\/div>\n        <\/div><\/p>\n
    Jika menggunakan jQuery sebagai script utama, maka kode yang digunakan akan menjadi seperti berikut:
    \n
    \n\t\t\t
    \n                
    \n                    
    \n                        
    <\/div>\n                        
    <\/div>\n                        
    <\/div>\n                    <\/div>\n                    
    \n                        \n                        Copy Code<\/span>\n                        Copied<\/span>\n                        Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                
    <\/p>\n
    $(window).on(\u2018load\u2019, function () {\r\n\r\n});<\/pre>\n
    <\/code><\/pre>\n\t\t\t<\/div>\n        <\/div><\/li>\n
  2. Ready event
    \nReady Event berjalan saat DOM (Document Object Model) telah selesai dimuat, hanya menunggu element seperti tag HTML dan lain lain, namun tidak menuggu konten seperti gambar, video. Contoh untuk defined ready event sebagai berikut :
    \n
    \n\t\t\t
    \n                
    \n                    
    \n                        
    <\/div>\n                        
    <\/div>\n                        
    <\/div>\n                    <\/div>\n                    
    \n                        \n                        Copy Code<\/span>\n                        Copied<\/span>\n                        Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                
    <\/p>\n
    $(document).ready(function () {\r\n\t\/\/insert code here\r\n});\r\n<\/pre>\n
    <\/code><\/pre>\n\t\t\t<\/div>\n        <\/div><\/p>\n
    Sekarang kita tahu keduanya dan cara untuk defined keduanya, mari kita lihat perbedaannya :<\/p>\n
      \n
    1. Document ready menggunakan jQuery event yang artinya kita memerlukan library jQuery, sedangkan untuk window load, itu hanya Javascript sudah tersedia disebagian besar browser.<\/li>\n
    2. Untuk perbedaan yang paling mencolok dari definisi kedua hal tersebut, window load menunggu konten selesai dimuat, berbeda dengan document ready, jadi jika video\/gambar membutuhkan waktu lama untuk dimuat, window load akan menunggu untuk berhasil dimuat terlebih dahulu, dan selama itu tidak ada code yang didalam script tersebut yang dijalankan. Oleh karena itu user mungkin harus menunggu lama. Disisi lain document ready, tidak akan menunggu konten telah dimuat, melainkan ketika script dimuat setelah DOM siap.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      Window onload dan document ready event bisa membuat kita bingung, dan menggunakan salah satunya bisa membuat masalah dikode yang mungkin susah untuk dicari tahu karena perbedaannya yang tipis diantara keduanya. Mari kita bahas satu per satu. Window load event Window load event berjalan saat seluruh halaman web telah selesai dimuat, menunggu semua element, konten dan […]<\/p>\n","protected":false},"author":1,"featured_media":140,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[3,20],"tags":[],"class_list":["post-138","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding-tutorial","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts\/138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=138"}],"version-history":[{"count":1,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts\/138\/revisions\/139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/media\/140"}],"wp:attachment":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}