jQuery $(document).ready() as it is work or have different behavior with ifram?

Question

They said : (http://api.jquery.com/ready/)

$(document).ready()

Specify a function to execute when the DOM is fully loaded.

I was loaded several url via iframs and looking for the ready event.But my function not work correctly.I want make a overlay while page loading and after loading finished remove the overlay.

Code :

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #overlay{
                background-color: rgb(0, 0, 0);
                border: medium none;
                cursor: wait;
                height: 100%;
                left: 0;
                margin: 0;
                opacity: 0.6;
                padding: 0;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 1000;
            }
        </style>        
    </head>
    <body>
        <div id="overlay"></div>
        <div>TODO write content</div>
        <iframe src="http://w3school.com"></iframe>
        <iframe src="http://w3school.com"></iframe>
        <iframe src="http://w3school.com"></iframe>
        <iframe src="http://w3school.com"></iframe>
        <iframe src="http://w3school.com"></iframe>
        <iframe src="http://w3school.com"></iframe>
        <iframe src="http://w3school.com"></iframe>        
        <script src="js/jquery.js" type="text/javascript"></script>
        <script>
            var time;
            time = new Date().getTime();
            console.log(time);
            $(document).ready(function () {
                $("#overlay").css({visibility: "hidden"});
                console.log("fired");
                console.log(time - new Date().getTime());
            });
        </script>
    </body>
</html>

Updated:

Even we remove the iframs and added delay loop with php.Then loaded that page with jquery and the problem is still same.

for ($int = 0; $int < 100000; $int ++) {
    for ($int = 0; $int < 100000; $int ++) {
        for ($int = 0; $int < 100000; $int ++) {
            echo '<pre>'.$int.'</pre>';
        }
    }
}

possible duplicate of [Capture iframe load complete event](http://stackoverflow.com/questions/3142837/capture-iframe-load-complete-event) — Aditya Singh, Mar 11 '15 at 09:59

score 1 · Answer 1 · answered Mar 11 '15 at 10:03

jQuery will fire your ready handler when your page's DOM is fully-formed; it doesn't wait for the iframes.

If you want to wait for the iframes to load, you'd want to use their load event. To avoid race conditions, you'll probably want to add the frames dynamically:

(function() {
    var frameSources = [
        "http://example.com/this.html",
        "http://example.com/that.html",
        "http://example.com/the-other.html"
    ];
    var done = 0;
    $.each(frameSources, function(i, src) {
        $("<iframe>").on("load error", function() {
            if (++done === frameSources.length) {
                console.log("All loaded!");
                $("#overlay").css({visibility: "hidden"});
            }
        }).attr("src", "foo.html").appendTo(document.body);
    });
})();

That looks like it has a race condition (what if the load event fires immediately, before $.each is done iterating?) but it doesn't, because browsers run the main JavaScript code using a single thread, so no event callbacks can occur until the $.each loop is complete.

score -3 · Answer 2 · answered Mar 11 '15 at 09:59

-3

you probably forgot to insert the jquery library. please check your console alerts / failures and add this into your head tag

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

answered Mar 11 '15 at 09:59

Doml The-Bread

1,761
1
11
17

jQuery $(document).ready() as it is work or have different behavior with ifram?

2 Answers2