CODEWITHSUNDEEP
javascriptjqueryload
eozzy
eozzy

Reputation: 68770

Do something AFTER the page has loaded completely

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

Upvotes: 30

Views: 114167

Answers (8)

allenski
allenski

Reputation: 1862

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.

Upvotes: 3

Atiq Baqi
Atiq Baqi

Reputation: 662

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

Upvotes: 7

Muhammad Nasir Shamshad
Muhammad Nasir Shamshad

Reputation: 521

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');
});`

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47687

$(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
    });
});

Upvotes: 60

Juri
Juri

Reputation: 32930

Using the jQuery.ready should be enough. Try this

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

or

$(function(){

});

which is a shortcut of the first.

Upvotes: 7

Stefan
Stefan

Reputation: 5662

$(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.

Upvotes: 1

James Hill
James Hill

Reputation: 61872

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.

Upvotes: 11

DJ Quimby
DJ Quimby

Reputation: 3699

Try this:

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

Upvotes: 4

Related Questions