.load does not work if element is already loaded

Question

I have the following problem. am using . load to perform an action after loading an iframe

$(document).ready(function() {
   $('iframe').on('load',function()
   { 
       $('#diviframe').fadeTo(200,1);
   });
});

Everything works great, except if the iframe loads before the code. I came to this conclusion because I tested with iframe with only one word (to load faster) and several texts (to take a little longer to load). someone has some idea how to solve this?

Answer 1

The problem is that jQuery code is running before iframe completes loading.

To ensure that this jQuery code runs after the iframe is loaded, you need to use $(Document).ready. Example:

$(document).ready(function() {
    $('iframe').on('load',function() { 
        $('#diviframe').fadeTo(200,1);
    });
});

Here’s the note that if you’re using jQuery and there’s no reason for iframe, maybe it’s best to load the content by ajax. Example:

$(document).ready(function() {
    $('iframe').load('http://yoursite.tld/pagina', function() { 
        $('#diviframe').fadeTo(200,1);
    });
});

In addition, it should be noted that

$('iframe').load(...)

and

$('iframe').on('load', ...);

work in the same way. By the way, the . on() is recommended and exists from version 1.7 of jQuery (see http://api.jquery.com/on/)