The javascript of the div "intro" is loading at last. It's taking too long to load as the web page loads the bg image first and then loads the java script. Is there a way i can display "loading please wait" message in that "intro" div until it pletely loads. I just want that the intro should load first.

Javascript code:

var tl = new Array(
    "=======================",
    " Wele user, ",
    " ###########################################"
);
var speed = 50;
var index = 0;
text_pos = 0;
var str_length = tl[0].length;
var contents, row;

function type_text() {
    contents = '';
    row = Math.max(0, index - 20);
    while (row < index)
    contents += tl[row++] + '\r\n';
    document.forms[0].elements[0].value = contents + tl[index].substring(0, text_pos) + "_";
    if (text_pos++ == str_length) {
        text_pos = 0;
        index++;
        if (index != tl.length) {
            str_length = tl[index].length;
            setTimeout("type_text()", 500);
        }
    }
    else setTimeout("type_text()", speed);
}

This is the script and its basically typing letter by letter in a text area in the div "intro". The problem is that it loads at last when the whole page has loaded. It starts printing the text after like 15 seconds or so.

The javascript of the div "intro" is loading at last. It's taking too long to load as the web page loads the bg image first and then loads the java script. Is there a way i can display "loading please wait" message in that "intro" div until it pletely loads. I just want that the intro should load first.

Javascript code:

var tl = new Array(
    "=======================",
    " Wele user, ",
    " ###########################################"
);
var speed = 50;
var index = 0;
text_pos = 0;
var str_length = tl[0].length;
var contents, row;

function type_text() {
    contents = '';
    row = Math.max(0, index - 20);
    while (row < index)
    contents += tl[row++] + '\r\n';
    document.forms[0].elements[0].value = contents + tl[index].substring(0, text_pos) + "_";
    if (text_pos++ == str_length) {
        text_pos = 0;
        index++;
        if (index != tl.length) {
            str_length = tl[index].length;
            setTimeout("type_text()", 500);
        }
    }
    else setTimeout("type_text()", speed);
}

This is the script and its basically typing letter by letter in a text area in the div "intro". The problem is that it loads at last when the whole page has loaded. It starts printing the text after like 15 seconds or so.

• javascript
• html
• css

Share Improve this question Follow edited Aug 28, 2012 at 19:25 dfsq 193k2626 gold badges242242 silver badges259259 bronze badges asked Aug 28, 2012 at 19:21 BhavyanshuBhavyanshu 53677 silver badges2525 bronze badges 5

• How's your script initialized? You're utilizing onpageload event or domready ? – WTK Commented Aug 28, 2012 at 19:23
• the web page loads the bg image first - How big is the image? – Travis J Commented Aug 28, 2012 at 19:24
• I am using onload and the bg image is of 400KB – Bhavyanshu Commented Aug 28, 2012 at 19:28
• when are you calling this function type_text() in the first place? – Ashirvad Commented Aug 28, 2012 at 19:29
• I am calling it in the body tag – Bhavyanshu Commented Aug 28, 2012 at 19:29

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

There are "domready" events you can listen to on the document but seems that's not cross-browser.

Eg: Mozilla

   document.addEventListener("DOMContentLoaded", methodName, false)

---

A better option is to use jQuery's .ready() event. They handle all cross-browser implementations.

Eg:

$(document).ready(function(){
   //execute code here
});

//Shorthand
$(function(){
 //...
});

See this related question for more on domready.

Load a page with the empty intro div, run the script with "loading please wait" then trigger an ajax request to load the rest of the page and update the page on onComplete event from the ajax request

Using jQuery

   $(document).ready(function() {
      // update div here 
    });

http://api.jquery./ready/

Or you could do that with

window.onload= (function() {
  // update div here        
};

You can use jquery for this by wrapping the content in a div tag and then another div that holds a loading image, something to this effect:

$(document).ready(function () {
    $('#loading').show();

    $('#divShowMeLater').load(function () {
        $('#loading').hide();
        $('#divShowMeLater').show();
    });
})

Assume divShowMeLater is the div that contains all the content being loaded. The markup would look similiar to this:

<div id="divShowMeLater" style="margin-left:auto;margin-right:auto;text-align:center;" >
    <div id="loading">Page loading...
        <img src="images/ajax-loader.gif" alt="loading page..." />
    </div>
</div>