html页面加载消息

我的HTML页面加载有点慢，因为它的jQuery。我想要一个图像，告诉用户它正在加载，直到整个页面被加载。我应该如何去做这件事？
非常感谢提前。html页面加载消息

<script type="text/javascript"> 
    $(document).ready(function(){ 
     //my jquery here.... 

    }); 
</script>

来源

2010-10-29 DGT

设计页面时已经包含加载消息，因此当从服务器加载页面时，消息已显示。

然后，使用jQuery，你能尽快隐藏消息的页面已准备就绪：

$(document).ready(function(){ 
    $('#loadingMessage').hide(); 
});

来源

2010-10-29 22:47:46

这样只会让消息显示，直到DOM被载入，如果目的是要显示的消息，直到所有的图像加载，它的更好我的选项：window.onload。 – netadictos 2010-10-31 16:17:12

嗯，你可以加载，说：“装载”的图像，然后加载该文件的脚本的其余部分由要么做类似：

var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript();

或者，你可以加载图像，然后提交Ajax请求加载页面的其余部分。您甚至可以尝试在页面顶部制作动画GIF或其他图像，一旦文档加载（并且您的脚本激活），就可以删除该图像。

来源

2010-10-29 22:47:54 LostInTheCode

http://www.jsfiddle.net/dactivo/m4Bxe/

window.onload = function() { 

$("#loading").hide();  

    };

的window.onload将等待页面加载整体。 ready()等待DOM准备就绪，这实际上是中立的。

你可以在阅读本these jquery docs

“虽然JavaScript提供负载事件执行代码，当页面呈现，这个事件没有得到触发，直到所有的资产，如画面已经完全收到在大多数情况下，只要DOM层次结构为完全构建，就可以运行脚本。处理程序通过将.ready（）保证为在DOM准备就绪后执行“

来源

2010-10-29 22:51:52 netadictos

贾斯汀的方法将做的伎俩。

确保您优化资源装载的方式，例如把你的脚本在页面的底部，所以他们不会阻止HTML渲染

http://developer.yahoo.com/performance/rules.html

来源

2010-10-30 02:25:46

有一个背景图像通过设置css到主体，并删除文档中的元素。准备

来源

2010-10-30 02:30:33 bevacqua

我知道这是一个相当古老的线程，但尽管是必要的jQuery以下解决方案为我：

后

先右侧，身体标记补充一点：

<div id="loading"> 
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> 
</div>

然后添加样式类对于div和图像以你的CSS：

#loading { 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    position: fixed; 
    display: block; 
    opacity: 0.7; 
    background-color: #fff; 
    z-index: 99; 
    text-align: center; 
} 

#loading-image { 
    position: absolute; 
    top: 100px; 
    left: 240px; 
    z-index: 100; 
}

最后这个JavaScript添加到您的网页（最好在你的页面的结束，成交当然标记之前）：

<script language="javascript" type="text/javascript"> 
$(window).load(function() { 
$('#loading').hide(); }); 
</script>

然后通过样式类调整加载图像的位置和加载div的背景颜色。

这就是它，工作得很好。但是当然你必须在某个地方有一个ajax-loader.gif。

尝试AJAXLoad他们有一些伟大的动画GIF的存在.. :)

来源

2013-01-04 04:30:53

html页面加载消息

回答

相关问题