Question

是否有一个javascript事件，我可以挂钩，让我知道什么时候一切都已完成绘制到浏览器屏幕？具有适当CSS的图像，背景和DOM元素。

我正在设置一些＆＃34; loading ...＆＃34; div只有在页面完美且准备好向用户显示时才会消失。

我知道$（document）.ready和onLoad，但这些不是我的意思。

我正在使用angularJS，但我认为这不重要。

谢谢！

Answer 1

您可能知道，$（document）.ready只等待HTML结构和Javascript加载才能触发。

你最好使用：

$(window).load(function(){
    //do stuff here
});

等待页面中的所有内容加载（甚至图片）

Answer 2

虽然此解决方案不会触发任何事件，但它可以帮助您。

像这样定义CSS：

#dvLoading
{
   background:#000 url(images/loader.gif) no-repeat center center;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
}

在

中使用上述内容

<div id="dvLoading"></div>

然后这样做：

$(window).load(function(){
  $('#dvLoading').fadeOut(2000);
});

演示：http://jsfiddle.net/jquerybyexample/ssqtH/embedded/result/

来源：http://www.jquerybyexample.net/2012/06/show-loading-image-while-page-is.html

Answer 3

因为您正在使用AngularJS，我可以假设您的图片和内容大多是动态加载的，在这种情况下，您无法（轻松）知道您的内容到底是什么时候生成的，因此您就可以了也不知道何时会加载所有图像，因为所有图像都会异步加载。

您可以做的是将窗口小部件/应用程序/控制器的DOM占位符默认设置为类似加载的状态（可能是loading.gif？），当Angular生成内容时，它将替换它。请查看http://docs.angularjs.org/guide/animations，了解如何在某些指令上实现动画。

然后在那些小部件/应用程序/控制器中，您必须对其中的内容执行相同的操作...

所以基本上它是一个级联的加载屏幕＆＃34;，你的应用程序的每个级别都像喷泉一样加载。

Answer 4

$（document）.ready或onLoad功能有什么问题？

$(window).load(function()
{
    $(".loading").hide();
}

javascript：“一切都已完成绘制到屏幕”事件？

4 个答案: