Pertanyaan window.onload vs $ (document) .ready ()


Apa perbedaan antara JavaScript window.onload dan jQuery $(document).ready() metode?


1086
2017-09-13 06:24


asal


Jawaban:


Itu ready event terjadi setelah dokumen HTML telah dimuat, sedangkan onload acara terjadi kemudian, ketika semua konten (misalnya gambar) juga telah dimuat.

Itu onload acara adalah acara standar di DOM, sedangkan ready acara khusus untuk jQuery. Tujuan dari ready peristiwa adalah bahwa hal itu harus terjadi sedini mungkin setelah dokumen dimuat, sehingga kode yang menambahkan fungsionalitas ke elemen di halaman tidak harus menunggu semua konten dimuat.


1110
2017-09-13 06:28



window.onload adalah acara JavaScript bawaan, tetapi sebagai implementasinya halus quirks di browser (Firefox, Internet Explorer 6, Internet Explorer 8, dan Opera), jQuery menyediakan document.ready, yang mengabstraksikannya, dan menyala segera setelah DOM halaman siap (tidak menunggu gambar, dll.).

$(document).ready (perhatikan itu tidak  document.ready, yang tidak terdefinisi) adalah fungsi jQuery, membungkus dan menyediakan konsistensi ke acara berikut:

  • document.ondomcontentready / document.ondomcontentloaded - peristiwa baru yang menyala ketika dokumen DOM dimuat (yang mungkin beberapa waktu sebelum gambar, dll. dimuat); lagi, sedikit berbeda di Internet Explorer dan di seluruh dunia
  • dan window.onload (yang diimplementasikan bahkan di browser lama), yang menyala saat seluruh halaman dimuat (gambar, gaya, dll.)

123
2017-09-13 06:30



$(document).ready() adalah acara jQuery. JQuery's $(document).ready() metode dipanggil segera setelah DOM siap (artinya browser telah mem-parsing HTML dan membangun pohon DOM). Ini memungkinkan Anda untuk menjalankan kode segera setelah dokumen siap untuk dimanipulasi.

Misalnya, jika browser mendukung acara DOMContentLoaded (seperti yang dilakukan oleh banyak browser non-IE), maka itu akan diaktifkan pada peristiwa itu. (Perhatikan bahwa acara DOMContentLoaded hanya ditambahkan ke IE di IE9 +.)

Dua sintaks dapat digunakan untuk ini:

$( document ).ready(function() {
   console.log( "ready!" );
});

Atau versi tulisan cepat:

$(function() {
   console.log( "ready!" );
});

Poin utama untuk $(document).ready():

  • Tidak akan menunggu untuk gambar yang akan dimuat.
  • Digunakan untuk mengeksekusi JavaScript ketika DOM benar-benar dimuat. Masukan penangan acara di sini.
  • Dapat digunakan beberapa kali.
  • Menggantikan $ dengan jQuery ketika Anda menerima "$ tidak didefinisikan."
  • Tidak digunakan jika Anda ingin memanipulasi gambar. Menggunakan $(window).load() sebagai gantinya.

window.onload() adalah fungsi JavaScript asli. Itu window.onload() acara diaktifkan ketika semua konten di halaman Anda telah dimuat, termasuk DOM (model objek dokumen), iklan spanduk, dan gambar. Perbedaan lain antara keduanya adalah itu, sementara kita dapat memiliki lebih dari satu $(document).ready() berfungsi, kita hanya dapat memilikinya onload fungsi.


78
2017-08-20 16:00



SEBUAH Beban Windows acara aktif ketika semua konten di halaman Anda dimuat penuh termasuk konten DOM (document object model) dan JavaScript asynchronous, bingkai dan gambar. Anda juga dapat menggunakan body onload =. Keduanya sama; window.onload = function(){}dan <body onload="func();"> berbagai cara menggunakan acara yang sama.

jQuery $document.ready fungsi acara mengeksekusi sedikit lebih awal dari window.onload dan disebut sekali DOM (Document object model) dimuat pada halaman Anda. Itu tidak akan menunggu gambar, bingkai untuk memuat sepenuhnya.

Diambil dari artikel berikut: bagaimana $document.ready() berbeda dengan window.onload()


38
2017-09-17 07:09



Sebuah kata peringatan untuk digunakan $(document).ready() dengan Internet Explorer. Jika permintaan HTTP terganggu sebelum seluruh dokumen dimuat (misalnya, ketika halaman sedang dialirkan ke browser, tautan lain diklik) IE akan memicu $(document).ready peristiwa.

Jika ada kode di dalam $(document).ready() referensi peristiwa DOM objek, potensi ada untuk benda-benda yang tidak ditemukan, dan kesalahan Javascript dapat terjadi. Jagalah referensi Anda ke objek-objek itu, atau tangguhkan kode yang merujuk objek-objek itu ke peristiwa window.load.

Saya belum dapat mereproduksi masalah ini di peramban lain (khususnya, Chrome dan Firefox)


21
2017-08-27 18:56



$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


18
2018-02-26 12:30



Acara

$(document).on('ready', handler) berikatan dengan acara siap pakai dari jQuery. Pawang disebut saat DOM dimuat. Aset seperti gambar mungkin masih hilang. Itu tidak akan pernah disebut jika dokumen siap pada saat mengikat. jQuery menggunakan DOMContentLoaded-Hasil untuk itu, tiru jika tidak tersedia.

$(document).on('load', handler) adalah acara yang akan dipecat sekaligus sumber daya dimuat dari server. Gambar dimuat sekarang. Sementara onload adalah acara HTML mentah, siap dibangun oleh jQuery.

Fungsi

$(document).ready(handler) sebenarnya adalah a janji. Pawang akan segera dipanggil jika dokumen sudah siap pada saat panggilan. Kalau tidak, itu mengikat ke ready-Peristiwa.

Sebelum jQuery 1.8, $(document).load(handler) ada sebagai alias untuk $(document).on('load',handler).

Bacaan lebih lanjut


15
2018-06-02 10:38



window.onload:  Peristiwa JavaScript normal.

document.ready:  Peristiwa jQuery tertentu ketika seluruh HTML telah dimuat.


11
2018-03-03 06:52



Document.ready (acara jQuery) akan aktif ketika semua elemen berada di tempat, dan mereka dapat direferensikan dalam kode JavaScript, tetapi konten tidak perlu dimuat. Document.ready dijalankan ketika dokumen HTML dimuat.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

Itu window.load namun akan menunggu halaman dimuat sepenuhnya. Ini termasuk bingkai dalam, gambar, dll.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

11
2017-11-07 20:54