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

Question

我是否可以挂入一个javascript事件，该事件将在所有内容绘制到浏览器屏幕后通知我？ 具有适当CSS的图像，背景和DOM元素。

我正在设置一些“正在加载...”的div，这些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 ，了解如何在某些指令上实现动画。

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

因此，基本上，这是一个级联的“加载屏幕”，其中应用程序的每个级别都像喷泉一样加载。

Answer 4

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

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