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

Solution 1

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

Solution 2

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.

Solution 3

Using the jQuery.ready should be enough. Try this

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

or

$(function(){

});

which is a shortcut of the first.

Solution 4

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

Solution 5

Try this:

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

View more solutions