menjalankan fungsi setelah pemuatan halaman selesai

121

Saya menggunakan kode berikut untuk menjalankan beberapa pernyataan setelah pemuatan halaman.

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

Tetapi kode ini tidak berfungsi dengan baik. Fungsi ini dipanggil meskipun beberapa gambar atau elemen sedang dimuat. Yang saya inginkan adalah memanggil fungsi agar halaman dimuat sepenuhnya.

javascript html image Neeraj Kumar
sumber
1
Bisakah Anda menambahkan demo di JSFiddle.net ?
Some Guy
2
Bisakah Anda menggunakan jQuery? Jika demikian, coba$(window).load()
Matt Hintzke
Ya, dapatkah Anda menjelaskan dengan tepat apa yang tidak berfungsi dengan baik? Apakah Anda mendapatkan kesalahan, atau mungkin Anda memanggil alertfungsi sebelum jendela digambar ulang (membuatnya terlihat seperti dipanggil sebelum dimuat)? Kode terlihat baik-baik saja, dan memaksa pengguna untuk mengunduh pustaka besar mungkin tidak akan memperbaiki masalah ini atau membuatnya lebih mudah untuk didiagnosis.
Jeffrey Sweeney
doxdesk.com/img/updates/20091116-so-large.gif
Jeffrey Sweeney
Ketika saya mengatakan itu tidak berfungsi, maksud saya daripada fungsi dijalankan bahkan jika beberapa gambar sedang dimuat.
Neeraj Kumar

Jawaban:

166

ini mungkin berhasil untuk Anda:

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

atau jika kenyamanan Anda dengan jquery,

$(document).ready(function(){
// your code
});

$(document).ready()diaktifkan di DOMContentLoaded, tetapi peristiwa ini tidak diaktifkan secara konsisten di antara browser. Inilah sebabnya mengapa jQuery kemungkinan besar akan menerapkan beberapa solusi berat untuk mendukung semua browser. Dan ini akan membuat sangat sulit untuk "secara tepat" mensimulasikan perilaku menggunakan Javascript biasa (tapi bukan tidak mungkin tentunya).

seperti yang disarankan Jeffrey Sweeney dan J Torres, saya pikir lebih baik memiliki setTimeoutfungsi, sebelum mengaktifkan fungsi seperti di bawah ini:

setTimeout(function(){
 //your code here
}, 3000);
Shreedhar
sumber
12
jQuery readytidak akan melakukan apa yang diminta OP. readydiaktifkan saat DOM dimuat, bukan setelah elemen dimuat. loadakan aktif setelah elemen selesai memuat / rendering.
Jaime Torres
Sepertinya OP ingin semua elemen dimuat seluruhnya, bukan hanya HTML.
Jeffrey Sweeney
3
@shreedhar atau dia dapat menggunakan alat yang tepat untuk pekerjaan itu ( load).
Jaime Torres
14
setTimeoutadalah ide yang buruk. Ini bergantung pada pemuatan halaman di bawah 3 detik (atau n detik tergantung pada nilai apa yang Anda pilih.) Jika pemuatan memakan waktu lebih lama, itu tidak akan berfungsi, dan jika halaman memuat lebih cepat, itu harus menunggu tanpa alasan.
JJJ
1
@ChristianMatthew its useCapture Jika true, useCapture menunjukkan bahwa pengguna ingin memulai pengambilan. Setelah memulai pengambilan, semua peristiwa dari jenis yang ditentukan akan dikirim ke pendengar terdaftar sebelum dikirim ke Target Acara di bawahnya di pohon DOM. Peristiwa yang melonjak ke atas melalui pohon tidak akan memicu pendengar yang ditunjuk untuk menggunakan penangkapan. Lihat Peristiwa DOM Level 3 untuk penjelasan mendetail.
Shreedhar
52

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

sama untuk jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});




CATATAN: - Jangan gunakan markup di bawah ini (karena itu menimpa deklarasi sejenis lainnya):

document.onreadystatechange = ...
T.Todua
sumber
1
apakah browser silang ini didukung
bluejayke
Jawaban ini jauh lebih baik dari yang lain. +1
Xydez
Baik sekali! Terima kasih.
Farzin Kanzi
34

Jika Anda dapat menggunakan jQuery, lihat load . Anda kemudian dapat mengatur fungsi Anda untuk berjalan setelah elemen Anda selesai dimuat.

Misalnya, pertimbangkan halaman dengan gambar sederhana:

<img src="book.png" alt="Book" id="book" />

Penangan kejadian bisa terikat ke gambar:

$('#book').load(function() {
  // Handler for .load() called.
});

Jika Anda membutuhkan semua elemen di jendela saat ini untuk dimuat, Anda dapat menggunakan 

$(window).load(function () {
  // run code
});
Jaime Torres
sumber
1
Bukankah loadmetode jQuery hanya mengikat fungsi ke acara pemuatan menggunakan Javascript? Bagaimana ini bisa berbeda dari apa yang sudah dilakukan OP?
Alex Kalicki
@AlexKalicki AFAIK tidak akan ada bedanya, kecuali bahwa jQuery mungkin menggunakan addEventListenerdaripada mengikat onloadproperti DOM0 .
Alnitak
@AlexKalicki Saya tidak bisa mengatakan bahwa ia menggunakan fungsi yang sama persis, tetapi menurut dokumentasi, jQuery memastikan bahwa semua elemen termasuk gambar dimuat sebelum kebakaran ini. Saya cenderung percaya bahwa akan ada logika tambahan jika kasusnya seperti ini, dan saya tidak punya alasan untuk tidak mempercayai dokumentasi, meskipun saya tidak pernah mengalami masalah yang sama yang dilaporkan oleh OP.
Jaime Torres
4
Mulai JQuery v1.8, .load tidak digunakan lagi. sumber
Adonis K. Kakoulidis
1
Solusi terbaik untuk pertanyaan itu.
Roberto Sepúlveda Bravo
29

Saya agak bingung apa yang Anda maksud dengan pemuatan halaman selesai, "Pemuatan DOM" atau "Pemuatan Konten" juga? Dalam pemuatan halaman html dapat mengaktifkan peristiwa setelah dua jenis peristiwa.

  1. Pemuatan DOM: Yang memastikan seluruh pohon DOM dimuat dari awal hingga akhir. Tetapi tidak memastikan memuat konten referensi. Misalkan Anda menambahkan gambar dengan imgtag, jadi acara ini memastikan bahwa semua imgdimuat tetapi tidak ada gambar yang dimuat dengan benar atau tidak. Untuk mendapatkan acara ini Anda harus menulis cara berikut:

    document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

    Atau menggunakan jQuery: 

    $(document).ready(function(){
// your code
});

  2. Setelah DOM dan Content Load: Yang menunjukkan DOM dan Content memuat juga. Ini akan memastikan tidak hanya imgtag itu akan memastikan juga semua gambar atau konten relatif lainnya dimuat. Untuk mendapatkan acara ini Anda harus menulis cara berikut:

    window.addEventListener('load', function() {...})

    Atau menggunakan jQuery:

    $(window).on('load', function() {
 console.log('All assets are loaded')
})
Hanif
sumber
2
Ini adalah satu-satunya jawaban di sini yang memberikan solusi non-jQuery untuk OP, dengan penjelasan yang jelas
Velojet
@Hanif DOMContentLoadedevent handler sepertinya tidak melakukan apa pun untuk saya, tetapi loadmelakukannya.
Brandon Benefield
1
Bukankah dua contoh terakhir membutuhkan titik koma di akhir baris?
R. Navega
11

Jika Anda ingin memanggil fungsi js di halaman html Anda, gunakan acara onload. Peristiwa onload terjadi saat agen pengguna selesai memuat jendela atau semua frame dalam FRAMESET. Atribut ini dapat digunakan dengan elemen BODY dan FRAMESET.

<body onload="callFunction();">
....
</body>
pengguna2361682
sumber
7

Dengan cara ini Anda dapat menangani kedua kasus - jika halaman sudah dimuat atau belum:

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}
tsveti_iko
sumber
3

Atau Anda dapat mencoba di bawah ini.

$(window).bind("load", function() { 
// code here });

Ini berfungsi di semua kasus. Ini hanya akan terpicu ketika seluruh halaman dimuat.

Ganesh Ram Ravi
sumber
3

Anda terbaik sejauh yang saya tahu adalah menggunakan

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

Jawaban # 1 menggunakan DOMContentLoaded peristiwa ini merupakan langkah mundur karena DOM akan dimuat sebelum semua aset dimuat.

Jawaban lain merekomendasikan setTimeoutyang saya akan sangat menentang karena ini sepenuhnya subyektif terhadap kinerja perangkat klien dan kecepatan koneksi jaringan. Jika seseorang berada di jaringan yang lambat dan / atau memiliki cpu yang lambat, sebuah halaman dapat memakan waktu beberapa hingga puluhan detik untuk dimuat, sehingga Anda tidak dapat memprediksi berapa lama waktunya.setTimeout dibutuhkan.

Adapun readystatechange, aktif setiap ada readyStateperubahan yang menurut MDN akan tetap sebelum loadacara.

Lengkap

Status menunjukkan bahwa peristiwa beban akan segera diaktifkan.

Ryan Walker
sumber
2 
window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}
tvrcgo
sumber
2
Meskipun cuplikan kode ini mungkin bisa menjadi solusinya, menyertakan penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa mendatang, dan orang-orang itu mungkin tidak tahu alasan saran kode Anda.
yivi
@yivi jika itu bukan pesan otomatis: cukup jelas bagi siapa pun arti kode itu, terutama karena ada komentar di kode ..
bluejayke
1

Jika Anda sudah menggunakan jQuery, Anda dapat mencoba ini: 

$(window).bind("load", function() {
   // code here
});
santosh
sumber
4
Tidak berguna tanpa penjelasan.
Daniel W.
1

Saya dapat memberi tahu Anda bahwa jawaban terbaik yang saya temukan adalah meletakkan skrip "driver" tepat setelah </body>perintah. Ini adalah yang termudah dan, mungkin, lebih universal daripada beberapa solusi di atas.

Rencananya: Di halaman saya ada meja. Saya menulis halaman dengan tabel ke browser, lalu mengurutkannya dengan JS. Pengguna dapat menggunakannya dengan mengklik tajuk kolom.

Setelah meja diakhiri a </tbody> perintah, dan badan diakhiri, saya menggunakan baris berikut untuk memanggil JS penyortiran untuk mengurutkan tabel berdasarkan kolom 3. Saya mendapatkan skrip penyortiran dari web sehingga tidak direproduksi di sini. Setidaknya untuk tahun depan, Anda dapat melihat ini dalam operasi, termasuk JS, di static29.ILikeTheInternet.com. Klik "di sini" di bagian bawah halaman. Itu akan memunculkan halaman lain dengan tabel dan skrip. Anda dapat melihatnya memasang data kemudian dengan cepat menyortirnya. Saya perlu mempercepatnya sedikit tetapi dasar-dasarnya sudah ada sekarang.

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

MakerMikey

Micheal Morrow
sumber
0

Coba jQuery ini :

$(function() {
 // Handler for .ready() called.
});
djserva.dll
sumber
1
jQuery readytidak akan melakukan apa yang diminta OP. readydiaktifkan saat DOM dimuat, bukan setelah elemen dimuat. loadakan aktif setelah elemen selesai memuat / rendering.
Jaime Torres
0

memanggil fungsi setelah waktu pemuatan halaman lengkap habis 

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);
Luaskan cuplikan

MH
sumber
0

Saya cenderung menggunakan pola berikut untuk memeriksa dokumen untuk menyelesaikan pemuatan. Fungsi mengembalikan Promise (jika Anda perlu mendukung IE, sertakan polyfill ) yang diselesaikan setelah dokumen selesai dimuat. Ini digunakan di setIntervalbawah karena implementasi yang serupa dengan setTimeoutdapat menghasilkan tumpukan yang sangat dalam.

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Tentu saja, jika Anda tidak harus mendukung IE:

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Dengan fungsi tersebut, Anda dapat melakukan hal berikut:

getDocReadyPromise().then(whatIveBeenWaitingToDo);
Paul Rowe
sumber
-1

Saya menggunakan komponen web sehingga berfungsi untuk saya:

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});
ufukomer
sumber
-3

Letakkan skrip Anda setelah tag tubuh selesai ... berfungsi ...

Kalyan
sumber