欢迎加载...页面与Jquery

Question

如何实现一个欢迎屏幕5秒钟，提供信息，如加载应用程序... +一些应用程序的信息...而主页加载在后台。

Answer 1

我认为这是可以接受的一个“载入中...”在某些情况下页面 - 例如，一个用户在业务应用程序日志后（想想TurboTax在线...它说'建立安全连接'，这可能不完全正确，但加载界面的东西）。每当匿名用户访问您的网站时显示页面可能不是最好的主意。

看看jQuery BlockUI。它很灵活，可以做你正在谈论的事情。

Answer 2

除非您真的在后台使用这段时间来实际进行某种预加载，否则我会强烈建议不要从最终用户的角度出发。我个人会觉得很烦人，当进入一个网站时，在实际获得我想要的内容之前，我不得不坐下来进行一些介绍。

这就是为什么我倾向于讨厌在Flash中设计的网站或那些仅仅包含Flash splash页面的网站。

编辑：我并不认为主要的网页的加载应该有资格获得太多的“预加载”的规模，除非它是资源密集型。再次，这些只是我的看法。

编辑＃2：也可以争辩说，您的网站的访问者将根据短短五秒的时间决定是停留还是停留。请记住，那些使用互联网的人往往注意到果蝇的注意力，并且在他们真正到达内容之前将它们置于持有模式中是失去这些用户的好方法。

Answer 3

当页面加载时（理论上作为绝对定位的叠加层），您将显示欢迎消息。然后，您可以使用jQuery揭开序幕定时器：

$(document).ready(function(){ 
    setTimeout(function(){ 
     $('div#overlay').fadeOut(); 
    }, 5000); 
}); 

Answer 4

虽然我同意@TheTXI，要做到这一点是使用CSS有“载入中...”屏幕默认为可见的最好方式，然后一旦一切都使用jQuery加载（而不是等待一段固定的时间），就隐藏它。

见jQuery.load() ...例如：

$(document).ready(function(){ 
    $("body img:last").load($("#welcome-screen").fadeOut()); 
    }); 

Answer 5

只为任何未来谁发现这一点，我找到了一个更优雅的解决方案。

http://www.jnorton.co.uk/blog/jquery-check-if-all-content-has-been-loaded

这是我如何使用它：

$(document).ready(function(){ 
    $(window).load(function() {$("#welcome").fadeOut('fast'); }) 
});