How to perform function after Jquery (window).load is complete

Question

I'm trying fade in a div after an iframe has loaded. The iframe is being called after the window has loaded.

I can load the iframe fine but I can't figure out how to make the div fadeIn after the load has completed. Thanks ahead for your assistance.

This is what I've tried but the load function following the html isn't happening

$(function() {
    $(window).load( function() {
        $("#ad").html("<iframe ... </iframe>").load(function(){
            $("#ad").fadeIn("normal");
        });
    });
});

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

Javascript callback when IFRAME is finished loading?

edited May 23 '17 at 12:11

Community

1
1

answered Mar 24 '11 at 07:53

Sjoerd

74,049
16
131
175

Hussein · Answer 2 · 2011-03-24T08:24:18.197

0

Set your #ad to display:none; by default. Then try the following.

$(function() {
    $(window).load( function() {
        $("#ad").html("<iframe ... </iframe>").fadeIn("normal");       
    });
});

edited Mar 24 '11 at 08:24

answered Mar 24 '11 at 07:55

Hussein

42,480
25
113
143

Tried this with a 3000 ms fadeIn, but it didn't appear to work. Thanks for the suggestion. – xiatica Mar 24 '11 at 08:04

score 0 · Answer 3 · answered Jun 01 '11 at 22:59

You can get a handle on the iframe's window object and then check document.readyState to see if the load event has already fired. If it has, it will equal "complete".

Something like this:

$('<iframe>').attr('src', '/pow.html').appendTo(document.body);
var win = window[window.length - 1];

var fn = function () { console.log('loaded!') };
$(win).load(fn);
if (win.document.readyState === "complete") fn();

How to perform function after Jquery (window).load is complete

3 Answers3