Do something AFTER the page has loaded completely

Question

I'm using some embed codes that insert HTML to the page dynamically and since I have to modify that dynamically inserted HTML, I want a jquery function to wait until the page has loaded, I tried delay but it doesnt seem to work.

So for example, the dynamically inserted HTMl has an element div#abc

and I have this jquery:

if ( $('#abc')[0] ) { 
  alert("yes");
}

the alert doesn't show up.

I'd appreciate any help

Thanks

Depends on where/how you are inserting the dynamic html that has div#abc — Selvakumar Arumugam, Jan 27 '12 at 16:52
Hmm.. for example the google plus one embed code, I place a javascript in my html, which in turn loads an iframe and other divs, I want to modify one of THOSE elements — eozzy, Jan 27 '12 at 17:02

score 59 · Accepted Answer · edited Oct 04 '16 at 14:54

59

$(window).load(function () {
    ....
});

If you have to wait for an iframe (and don't care about the assets, just the DOM) - try this:

$(document).ready(function() { 
    $('iframe').load(function() { 
       // do something
    });
});

edited Oct 04 '16 at 14:54

BrTkCa

4,703
3
24
45

answered Jan 27 '12 at 16:50

Zoltan Toth

46,981
12
120
134

could it be because the embed code insert html in an iframe and/or asynchronously? – eozzy Jan 27 '12 at 16:52
This waits for all the assets on CURRENT page. Do you have iframes to wait for as well? – Zoltan Toth Jan 27 '12 at 16:55
Yes, exactly, not just the current page – eozzy Jan 27 '12 at 16:58
Updated the answer for an iframe – Zoltan Toth Jan 27 '12 at 17:02
still no alert, cause the iframe is not present in the current page either, its added via javascript through that embed code. – eozzy Jan 27 '12 at 17:07
http://stackoverflow.com/questions/5315065/jquery-wait-for-two-iframes-to-load - maybe that will help? – Zoltan Toth Jan 27 '12 at 17:09
If you know a way that works for CSS assets too? I mean it may take a more time images and fonts included in CSS download, but the .load() function just sees if all page loaded (not the CSS assets I think) – Mohammad Kermani Oct 29 '16 at 11:32
Consider that `load()` method is deprecated in newer versions and could cause errors in console. If you face that issue, use `on('load',function(){ })` instead. – Asef Hossini Sep 30 '21 at 08:06

score 10 · Answer 2 · answered Jan 27 '12 at 16:50

10

That is the purpose of jQuery's .ready() event:

$(document).ready(function() {
    if ( $('#abc').length ) //If checking if the element exists, use .length
        alert("yes");
});

Description: Specify a function to execute when the DOM is fully loaded.

answered Jan 27 '12 at 16:50

James Hill

60,353
20
145
161

1

James has it right. Check out the documentation: http://api.jquery.com/ready/ ..the DOM will be loaded and ready for manipulation when this is called. – Craig Koster Jan 27 '12 at 16:52
1

And just as a quick note...I believe the difference between a window.load and a jQuery.ready is that window.load waits until *all* assets (e.g. stylesheets, images, etc) have been downloaded before it is called while jQuery.ready fires as soon as the DOM is loaded and doesn't care if images and such are still loading. – Craig Koster Jan 27 '12 at 16:55
1

"embed codes that insert HTML to the page dynamically" can very well be added to the DOM after the `ready` event is triggered. – Stefan Jan 27 '12 at 16:57

Atiq Baqi · Answer 3 · 2019-09-24T04:10:22.547

7

The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. So you have to use -

$(window).on('load', function() {
 // code here
});

edited Sep 24 '19 at 04:10

answered Sep 22 '19 at 05:55

Atiq Baqi

612
1
7
16

3

Code-only answers are low-quality answers. Give an explanation to why this code snippet would work. – Taslim Oseni Sep 22 '19 at 11:09

Juri · Answer 4 · 2012-01-27T22:27:38.753

7

Using the jQuery.ready should be enough. Try this

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

or

$(function(){

});

which is a shortcut of the first.

edited Jan 27 '12 at 22:27

answered Jan 27 '12 at 16:52

Juri

32,424
20
102
136

score 4 · Answer 5 · answered Jan 27 '12 at 16:50

4

Try this:

$(document).ready(function () {
    if ( $('#abc')[0] ) { 
      alert("yes");
    }
});

answered Jan 27 '12 at 16:50

DJ Quimby

3,669
25
35

allenski · Answer 6 · 2023-04-18T03:25:33.473

Generally, to handle my JQuery before or after page loads, will use:

jQuery(function($){
    // use jQuery code here with $ formatting
    // executes BEFORE page finishes loading
});

jQuery(document).ready(function($){
    // use jQuery code here with $ formatting
    // executes AFTER page finishes loading
});

ES6 Update

Here's the ES6 version of the script using the arrow function:

// Executes before page finishes loading.
document.addEventListener('DOMContentLoaded', () => {
  // Use JavaScript code here.
});

In the first example, we use the DOMContentLoaded event to execute the code when the HTML document has been completely loaded and parsed.

// Executes after page finishes loading.
window.addEventListener('load', () => {
  // Use JavaScript code here.
});

In the second example, we use the load event to execute the code after all page content has been loaded, including images and other external resources.

score 1 · Answer 7 · answered Jan 27 '12 at 16:54

1

$(window).load(function () { ... }

can be enough but otherwise your embeded code (what ever that can be) might provide some callback functionality that you can make use of.

delay() should only be used to delay animations.

answered Jan 27 '12 at 16:54

Stefan

5,644
4
24
31

`load()` is deprecated after jquery 1.8 – Atiq Baqi Sep 24 '19 at 04:07

score 0 · Answer 8 · answered Apr 19 '19 at 07:57

0

Make sue you bind the event with dom load so it's there when trigger called. This is how you do it. Hope this helps someone someday

$(window).bind("load", function() { 
   //enter code here
   $("#dropdow-id").trigger('change');
});`

answered Apr 19 '19 at 07:57

Muhammad Nasir Shamshad

521
7
15

Do something AFTER the page has loaded completely

8 Answers8

ES6 Update

Linked