121

Sayfa yüklendikten sonra bazı ifadeleri yürütmek için aşağıdaki kodu kullanıyorum.

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

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

Ancak bu kod düzgün çalışmıyor. İşlev, bazı görüntüler veya öğeler yükleniyor olsa bile çağrılır. İstediğim, işlevi sayfanın tamamen yüklendiğini belirtmek.

javascript html image

— Neeraj Kumar
kaynak

1

JSFiddle.net'e bir demo ekleyebilir misiniz ?

— Some Guy

2

JQuery kullanabilir misiniz? Öyleyse, deneyin$(window).load()

— Matt Hintzke

Evet, neyin düzgün çalışmadığını tam olarak açıklayabilir misiniz? Bir hata mı alıyorsunuz veya belki de alertpencere yeniden çizilmeden önce (yüklemeden önce çağrılmış gibi görünmesini sağlayan) bir işlevi mi çağırıyorsunuz ? Kod iyi görünüyor ve kullanıcıları büyük kitaplıkları indirmeye zorlamak muhtemelen bu sorunu çözmeyecek veya teşhis edilmesini kolaylaştırmayacaktır.

— Jeffrey Sweeney

doxdesk.com/img/updates/20091116-so-large.gif

— Jeffrey Sweeney

Çalışmıyor dediğimde, bazı görüntüler yüklense bile fonksiyonun çalıştırılmasından bahsediyorum.

— Neeraj Kumar

166

bu sizin için işe yarayabilir:

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

veya jquery ile rahat ediyorsanız,

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

$(document).ready()DOMContentLoaded'da tetikleniyor, ancak bu olay tarayıcılar arasında tutarlı bir şekilde tetiklenmiyor. Bu nedenle jQuery, tüm tarayıcıları desteklemek için büyük olasılıkla bazı ağır geçici çözümler uygulayacaktır. Ve bu, davranışı düz Javascript kullanarak "tam olarak" simüle etmeyi çok zorlaştıracaktır (ama elbette imkansız değil).

Jeffrey Sweeney ve J Torres'in önerdiği setTimeoutgibi, aşağıdaki gibi işlevi çalıştırmadan önce bir işleve sahip olmanın daha iyi olduğunu düşünüyorum :

setTimeout(function(){
 //your code here
}, 3000);

— Shreedhar
kaynak

12

jQuery ready, OP'nin talep ettiği şeyi yapmayacaktır. readyöğeler yüklendikten sonra değil, DOM yüklendiğinde tetiklenir. loadöğeler yüklemeyi / oluşturmayı bitirdikten sonra patlayacaktır.

— Jaime Torres

Görünüşe göre OP, yalnızca HTML'nin değil, tüm öğelerin tamamen yüklenmesini istiyor.

— Jeffrey Sweeney

3

@shreedhar veya iş için doğru aracı kullanabilir ( load).

— Jaime Torres

14

setTimeoutkötü bir fikir. Sayfanın 3 saniyeden (veya seçtiğiniz değere bağlı olarak n saniyeden) daha kısa sürede yüklenmesine dayanır . Yükleme daha uzun sürerse, çalışmaz ve sayfa daha hızlı yüklenirse, sebepsiz yere beklemek zorunda kalmaz.

— JJJ

1

@ChristianMatthew, useCapture değeri true ise, useCapture, kullanıcının yakalamayı başlatmak istediğini belirtir. Yakalama başlatıldıktan sonra, belirtilen türdeki tüm olaylar, DOM ağacında altındaki herhangi bir EventTargets'a gönderilmeden önce kayıtlı dinleyiciye gönderilir. Ağaçta köpüren olaylar, yakalama kullanmak üzere belirlenmiş bir dinleyiciyi tetiklemeyecektir. Ayrıntılı açıklama için DOM Seviye 3 Olaylarına bakın .

— 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");
    }
});

jQuery için aynı:

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

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

NOT: - Aşağıdaki işaretlemeyi kullanmayın (çünkü aynı türden diğer bildirimlerin üzerine yazmaktadır):

document.onreadystatechange = ...

— T.Todua
kaynak

1

bu çapraz tarayıcı destekleniyor mu

— bluejayke

Bu cevap diğerlerinden çok daha iyi. +1

— Xydez

Çok iyi! Teşekkürler.

— Farzin Kanzi

34

JQuery kullanabiliyorsanız, yüke bakın . Ardından, öğenizin yüklenmesi bittikten sonra işlevinizi çalışacak şekilde ayarlayabilirsiniz.

Örneğin, basit bir resme sahip bir sayfayı düşünün:

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

Olay işleyici resme bağlanabilir:

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

Yüklemek için mevcut penceredeki tüm öğelere ihtiyacınız varsa,

$(window).load(function () {
  // run code
});

— Jaime Torres
kaynak

1

JQuery loadyöntemi, Javascript kullanarak load olayına bir işlevi bağlamaz mı? Bu, OP'nin halihazırda yapmakta olduğundan nasıl farklı olabilir?

— Alex Kalicki

@AlexKalicki AFAIK addEventListenerjQuery'nin DOM0 onloadözelliğini bağlamak yerine kullanması dışında farklı olmaz .

— Alnitak

@AlexKalicki Tam olarak aynı işlevselliği kullandığını söyleyemem ancak belgelere göre jQuery, görüntüler dahil tüm elemanların bu yangından önce yüklenmesini sağlıyor. Durum böyleyse ek bir mantık olacağına inanma eğilimindeyim ve OP'nin bildirdiği aynı sorunla hiç karşılaşmamış olsam da belgelere inanmamak için hiçbir nedenim yok.

— Jaime Torres

4

JQuery v1.8'den itibaren .load kullanımdan kaldırılmıştır. kaynak

— Adonis K. Kakoulidis

1

Soru için şimdiye kadarki en iyi çözüm.

— Roberto Sepúlveda Bravo

29

Sayfa yüklemesinin tamamlanmasıyla, "DOM Yüklemesi" veya "İçerik Yüklemesi" ile ne demek istediğiniz konusunda biraz kafam karıştı. Bir html'de sayfa yüklemesi, iki tip olaydan sonra olayı tetikleyebilir.

DOM yükü: Yüklenen DOM ağacının tamamının baştan sona olmasını sağlar. Ancak referans içeriğin yüklendiğinden emin olmayın. Görüntüleri imgetiketlere göre eklediğinizi varsayalım , bu nedenle bu olay, tüm imgyüklü ancak görüntülerin düzgün yüklenip yüklenmemesini sağlar. Bu olayı almak için aşağıdaki şekilde yazmalısınız:
```
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
```
Veya jQuery kullanarak:
```
$(document).ready(function(){
// your code
});
```
DOM ve İçerik Yüklemesinden Sonra: Bu, DOM ve İçerik yükünü de gösterir. Sadece imgetiketlemeyi değil, aynı zamanda tüm görüntülerin veya diğer göreceli içeriğin yüklenmesini de sağlayacaktır. Bu olayı almak için aşağıdaki şekilde yazmalısınız:
```
window.addEventListener('load', function() {...})
```
Veya jQuery kullanarak:
```
$(window).on('load', function() {
 console.log('All assets are loaded')
})
```

— Hanif
kaynak

2

Burada OP için jQuery olmayan bir çözüm sunan tek cevap, net bir açıklamayla

— Velojet

@Hanif DOMContentLoadedolay işleyicisi benim için bir şey yapmıyor gibi görünüyor ama loadyapıyor.

— Brandon Benefield

1

Son iki örnekte, satırların sonunda noktalı virgül gerekmez mi?

— R. Navega

11

Html sayfanızda js işlevini çağırmak istiyorsanız onload olayını kullanın. Kullanıcı aracısı bir pencereyi veya bir ÇERÇEVE içindeki tüm çerçeveleri yüklemeyi bitirdiğinde onload olayı gerçekleşir. Bu özellik, BODY ve FRAMESET öğeleriyle kullanılabilir.

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

— user2361682
kaynak

7

Bu şekilde her iki durumu da halledebilirsiniz - sayfa zaten yüklenmişse veya yüklenmemişse:

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

— tsveti_iko
kaynak

3

Alternatif olarak aşağıda deneyebilirsiniz.

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

Bu her durumda işe yarar. Bu, yalnızca sayfanın tamamı yüklendiğinde tetiklenecektir.

— Ganesh Ram Ravi
kaynak

3

Bildiğim kadarıyla en iyisi kullanmaktır

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

DOMContentLoadedEtkinliği kullanmanın 1 numaralı yanıtı , DOM tüm varlıklar yüklenmeden önce yükleneceği için geriye doğru bir adımdır.

Diğer yanıtlar setTimeout, istemcinin cihaz performansına ve ağ bağlantı hızına tamamen öznel olduğu için şiddetle karşı çıkacağımı tavsiye ediyor. Birisi yavaş bir ağdaysa ve / veya yavaş bir işlemciye sahipse, bir sayfanın yüklenmesi birkaç ila düzinelerce saniye sürebilir, bu nedenle ne kadar zamana setTimeoutihtiyacınız olacağını tahmin edemezsiniz .

Gelince readystatechange, MDN'yereadyState göre olaydan önce olacak her değişiklik olduğunda ateşlenirload .

Tamamlayınız

Durum, yükleme olayının ateşlenmek üzere olduğunu gösterir.

— Ryan Walker
kaynak

2

window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}

— tvrcgo
kaynak

2

Bu kod parçacığı çözüm olabilir, ancak bir açıklama da dahil olmak üzere yayınınızın kalitesini artırmaya gerçekten yardımcı olur. Gelecekte okuyucular için soruyu yanıtladığınızı ve bu kişilerin kod önerinizin nedenlerini bilmeyebileceklerini unutmayın.

— yivi

@yivi, eğer bu otomatik bir mesaj değilse: Bu kodun ne anlama geldiği herkes için oldukça açıktır, özellikle kodda yorumlar olduğu için ..

— bluejayke

1

Herhangi bir JS çerçevesi kullanmıyorsanız, bu proje, tarayıcılar arası uyumluluğa sahip doma hazır durumunu almanın en iyi yoludur.

https://github.com/ded/domready/blob/master/ready.js

— Olivier Refalo
kaynak

1

Zaten jQuery kullanıyorsanız, şunu deneyebilirsiniz:

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

— santosh
kaynak

4

Açıklama olmadan işe yaramaz.

— Daniel W.

1

Bulduğum en iyi cevabın </body>komutun hemen arkasına bir "sürücü" komut dosyası koymak olduğunu söyleyebilirim . Yukarıdaki çözümlerin bazılarından en kolay ve muhtemelen daha evrensel olanıdır.

Plan: Sayfamda bir tablo var. Tablonun bulunduğu sayfayı tarayıcıya yazıyorum, sonra JS ile sıraladım. Kullanıcı, sütun başlıklarına tıklayarak başvurabilir.

Tablo bir </tbody>komut sona erdikten ve gövde sona erdikten sonra, tabloyu sütun 3'e göre sıralamak için sıralama JS'sini çağırmak için aşağıdaki satırı kullanıyorum. Sıralama komut dosyasını web'den aldım, böylece burada yeniden oluşturulmasın. En azından önümüzdeki yıl, bunu JS de dahil olmak üzere çalışırken görebilirsiniz static29.ILikeTheInternet.com. Sayfanın altındaki "burayı" tıklayın. Bu, tablo ve komut dosyaları içeren başka bir sayfa açacaktır. Verileri koyduğunu ve ardından hızlıca sıraladığını görebilirsiniz. Biraz hızlandırmam gerekiyor ama temel bilgiler artık orada.

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

MakerMikey

— Micheal Morrow
kaynak

0

Bu jQuery'yi deneyin :

$(function() {
 // Handler for .ready() called.
});

— djserva
kaynak

1

jQuery ready, OP'nin talep ettiği şeyi yapmayacaktır. readyöğeler yüklendikten sonra değil, DOM yüklendiğinde tetiklenir. loadöğeler yüklemeyi / oluşturmayı bitirdikten sonra patlayacaktır.

— Jaime Torres

0

tam sayfa yükleme zaman aşımından sonra bir işlevi çağırın

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);

Snippet'i genişlet

— MH
kaynak

0

Belgenin yüklemeyi tamamlayıp tamamlamadığını kontrol etmek için aşağıdaki modeli kullanma eğilimindeyim. İşlev , belge yüklemeyi tamamladıktan sonra çözülen bir Promise (IE'yi desteklemeniz gerekiyorsa, polyfill'i dahil edin ) döndürür . Altını kullanır setIntervalçünkü benzer bir uygulama setTimeoutçok derin bir yığınla sonuçlanabilir.

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

Elbette, IE'yi desteklemeniz gerekmiyorsa:

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

Bu işlevle şunları yapabilirsiniz:

getDocReadyPromise().then(whatIveBeenWaitingToDo);

— Paul Rowe
kaynak

-1

Benim için çalışan web bileşenlerini kullanıyorum:

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

— ufukomer
kaynak

-3

Komut dosyanızı body etiketi tamamlandıktan sonra yerleştirin ... işe yarıyor ...

— Kalyan
kaynak

tam sayfa yüklemesinden sonra işlevi çalıştır

JavaScript

jQuery için aynı: