Javascript 加载时间过长

Question

div "intro" 的 javascript 终于加载了。由于网页先加载bg图像然后加载java脚本，因此加载时间太长。有没有办法我可以在“介绍” div 中显示“正在加载请稍候”消息，直到它完全加载。我只想先加载介绍。

Javascript 代码：

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

这是脚本，它基本上是在 div“intro”的文本区域中逐个字母输入。问题是它最终在整个页面加载时加载。它在大约 15 秒后开始打印文本。

Answer 1

您可以在document 上收听“domready”事件，但似乎是not cross-browser。

例如：Mozilla

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

---

更好的选择是使用 jQuery 的 .ready() 事件。它们处理所有跨浏览器的实现。

例如：

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

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

有关domready 的更多信息，请参阅此related question。

Answer 2

使用空的介绍 div 加载页面，使用“正在加载，请稍候”运行脚本，然后触发 ajax 请求以加载页面的其余部分并从 ajax 请求更新 onComplete 事件的页面

Answer 3

使用 jQuery

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

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

或者你可以用

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

Answer 4

您可以通过将内容包装在 div 标记中，然后将另一个 div 包含加载图像来使用 jquery，效果如下：

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

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

假设 divShowMeLater 是包含所有正在加载的内容的 div。标记看起来与此类似：

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