CODEWITHSUNDEEP
javascriptjspjquerypopup
user989138
user989138

Reputation: 1

How to create a popup while a page is being loaded?

I've spent the last two days doing research about this topic. I need a popup to be displayed while a page is loading, but I only get it to display once the page is loaded.

The code for the pop-up (in a .js file) is executed after the page is loaded Even if I call the js code in the header of the jsp file, it is still displayed after the page is loaded. However if I put an "alert" script in the jsp file after the call to the jsp, it is executed before the page is loaded, but not the popup.

The javascript code for the pop-up has this structure:

package.popup = {
        init : function() {
        this._mypopup();
    },

    _myPopup : function() {
        //...(code)
            alert("This alert is also displayed after the page is loaded");
            jQ.get('myPopupData.do?ajax=ajax', function(popupData) {
        //...(code)
                }
            });
        }
    }
};

The code in the .jsp is something like this:

//... some code
<div class="introSection">
    <div class="header">
        <header>
            <hdgroup>
                <h1>Welcome to myPage.</h1>
            </hdgroup>       
            <jwr:script src="/javascript/bundles/jquery-1.6.1.min.js" useRandomParam="false" />
            <jwr:script src="/javascript/bundles/homePage.js" useRandomParam="false" />
            <jwr:script src="/javascript/bundles/mobilePopup.js" useRandomParam="false" />     
            <script language="javascript">alert("This alert is placed after the popup code is called in the header, but it's showed before");</script>         
        </header>
    </div>
    <ul>
        //more code
    </ul>          
//more code

Any suggestion about a possible solution?

Upvotes: 0

Views: 1468

Answers (2)

Indigenuity
Indigenuity

Reputation: 9740

I'm not sure what it is you're trying to do before the page loads, but if it has to do with not wanting the user to download the whole page before a decision point, I would just have an intermediate page instead.

If it is just code that needs to run before the user sees anything, make the body of the page invisible(i.e. display:none in CSS) until the code is done executing. After the code has finished, make the body visible again.

Perhaps these aren't elegant solutions, but if you're trying to do something between the server and the client, there's probably a better place to be doing it anyway.

Upvotes: 0

Manse
Manse

Reputation: 38147

Javascript is executed as its read from the page - put a <script> tag at the top of the page to create the loading div / dialog.

Upvotes: 1

Related Questions