Check if element is loaded

Question

I have a site and an iFrame in that site, as well as a lot of other content (images and so on).

Now I'm using jQuery's $(document).ready(function() { ... }); to execute code. In that code, I'm trying to manipulate content in the iFrame. However, I have to assure the iFrame is loaded to execute the code.

The iFrame usually loads in exactly the same time when the code is executed, so it sometimes fails and sometimes not.

If I use $('#iframe').load(function(){ });, the event is not always executed, because at that moment I attach that load listener, the iFrame may be already finished with loading, and the load event won't get executed again. If I leave it away, the elements are sometimes not yet there (the code get's executed too early).

So what I want to achieve is something like that:

if iFrame is already loaded
  -- execute code 
else 
  -- $('#iframe').load(function() { /*execute code*/ });

Is there a better way to achieve this without using a dirty timeout? Or if using this approach, is there a function which checks if the element is already loaded or not?

Solution 1

Make sure that $('#iframe').load(function(){ }); is executed before the iFrame's src is set.

To achieve this, set the src from javascript, not in HTML.

Also, loading sequence matters here. If your jQuery's overall wrapper is jQuery(window).load(function() {...}), the behaviour will be different from that given by jQuery(function() {...}).

Solution 2

For same domain iframe (as it seems to be your case here):

You can check if iframe has some content and then trigger load event using following logic:

$('#iframe').one('load', function(){
  console.log("Sure load event is called!")
}).each(function(){
  if(this.contentDocument.body.children.length) {
    $(this).trigger('load');
  }
})

For handling cross domain iframe too:

Your best bet i guess and if you don't need to support IE8 is probably to capture load event and set it before you set iframe in DOM, by calling it e.g inside head section:

document.addEventListener(
    'load',
    function(event){
        var elm = event.target;
        if( elm.id === 'iframe'){ // or any other filtering condition
            console.log("Sure iframe is loaded!")
        }
    },
    true // Capture event
);

Solution 3

The DOM always becomes ready before the page is fully loaded, it is usually not safe to attach a load event listener in code executed during a .ready() handler. For example, scripts can be loaded dynamically long after the page has loaded using methods such as $.getScript(). Although handlers added by .ready() will always be executed in a dynamically loaded script, the window's load event has already occurred and those listeners will never run.

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

• $( handler )
• $( document ).ready( handler )
• $( "document" ).ready( handler )
• $( "img" ).ready( handler )
• $().ready( handler )

load () documentation, read () documentation