CODEWITHSUNDEEP
javascripthtmlcss
Bhavyanshu
Bhavyanshu

Reputation: 536

Javascript taking too long to load

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 completely loads. I just want that the intro should load first.

Javascript code:

var tl = new Array(
    "=======================",
    " Welcome 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.

Upvotes: 2

Views: 9129

Answers (4)

JonH
JonH

Reputation: 33141

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>

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23034

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.

Upvotes: 2

Greg
Greg

Reputation: 1719

Using jQuery

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

http://api.jquery.com/ready/

Or you could do that with 

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

Upvotes: 0

Eduard
Eduard

Reputation: 3671

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

Upvotes: 0

Related Questions