Loading strategy of client side rendered html resources for html5 game

StackOverflow https://stackoverflow.com/questions/20237519

Question

I am working on an HTML5 facebook game (inside facebook canvas iframe) in which I use jquery in addition to some other js files, css files (image files, in the css files), font files, sound files and screens (html divs in seperate files).

I want to have a loading script as the size of the resources is around 1 MB. There are two options;

first one is writing a resource loader and load everything in correct order which really is painful.

second one is first having a simple loading screen at startup, which will be quicly loaded, upon loading this page, starting to load the actual html (with js, css and everyting) and handing over the loading process to the browser client. 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function iframeIsLoaded()
    {
        ...
    }
</script>
</head>
<body>
    <div id="loadingScreen" class="..."> <!-- iframe will be under this div -->
    ...
    </div>
    <iframe ...>
    </iframe>
...

obviously second option is much better but I don't have a clue how to do it. As shown above, I may use an iframe under the loading screen div but is there a way to send a message to the upper div from the iframe?

I am also open to other solutions!

Was it helpful?

Solution

You can do this using the iframe.load event.

What you will want to do is hide the iframe on page load and show the loading screen, then you want to wait until the content is loaded then Show the frame and hide the Loading screen.

(This example assumes you are using the src attribute of the IFrame to load the content)

Pure Javascript : Example JSFiddle

var frame = document.getElementById('iframeID');
var loading = document.getElementById('loadingScreen');

frame.style.display = 'none';//Originally hide the frame
loading.style.display = 'block';//Originally show the Loading Screen

frame.src = 'http://www.bing.com';//Set the src attribute

frame.onload = function() {
    frame.style.display = 'block';//Show the frame after it is loaded
    loading.style.display = 'none';//Hide the loading screen
}

EDIT : (Removed jQuery Example and Added a new Example based on Comment)

Here is a new example that checks the child page for the variable done to check if it is set to true.

Warning this example has the potential to not work due to Cross-Domain Scripting Security, this should only be used if you are 100% that both pages are on the same Domain

Child Page : 

    var done = false;

    setTimeout(function () {
        done = true;
    }, 10000);

Parent Page : (Script needs placing after the HTML / Before the end of the Body Tag ())

<div>
    <div id="loading">
        Loading...
    </div>
    <iframe id="iframeID"></iframe>
</div>
<script type="text/javascript">
    var frame = document.getElementById('iframeID');
    var loading = document.getElementById('loading');

    frame.style.display = 'none'; //Originally hide the frame
    loading.style.display = 'block'; //Originally show the Loading Screen

    frame.src = 'Test2.aspx'; //Set the src attribute

    frame.onload = function () {
        console.log('Loaded Frame');
    }

    var $interval = setInterval(CheckFrameDone, 500);

    function CheckFrameDone() {
        var done = frame.contentWindow.done;
        console.log(done);
        if (done) {
            console.log('Frame is Finished Loading');
            frame.style.display = 'block';
            loading.style.display = 'none';
            clearInterval($interval);
        } else {
            console.log('Still Waiting...');
        }
    }
</script>

With the second example you will notice that every 500 Milliseconds the parent page will check the child page for the done value, if it is true it will show the frame and clear the interval. Otherwise it will just continue to check.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top