Javascript taking too long to load

Question

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.

How's your script initialized? You're utilizing onpageload event or domready ? — WTK, Aug 28 '12 at 19:23
`the web page loads the bg image first` - How big is the image? — Travis J, Aug 28 '12 at 19:24
when are you calling this function type_text() in the first place? — Ashirvad, Aug 28 '12 at 19:29

score 2 · Accepted Answer · edited May 23 '17 at 12:33

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.

score 0 · Answer 2 · edited Nov 02 '17 at 10:21

0

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>

edited Nov 02 '17 at 10:21

CodingInTheUK

930
7
16

answered Aug 28 '12 at 19:24

JonH

32,732
12
87
145

It's not hiding the "Page loading..." message even after the contents of div load. – Bhavyanshu Aug 28 '12 at 19:59
And your div is called `id=loading`, that was my example so you have to make it fit your needs. In the ready function initially shows the div `$('#loading').show();` and then hides it after the other div has loaded. – JonH Aug 28 '12 at 20:05

score 0 · Answer 3 · answered Aug 28 '12 at 19:24

0

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

answered Aug 28 '12 at 19:24

Eduard

3,536
1
20
27

score 0 · Answer 4 · answered Aug 28 '12 at 19:25

0

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        
};

answered Aug 28 '12 at 19:25

Greg

1,671
2
15
30

2

jQuery's `document.ready` and native `window.onload` are not the same. – dfsq Aug 28 '12 at 19:27

Javascript taking too long to load

4 Answers4