如何让html页面数据没有加载完前显示loading加载中

在前端页面体验处理上，一般1M之内的页面在正常网络下会较快的加载完，如果遇到网络不好的情况和页面更大需要请求的资源更多更大的情况下，怎样保证用户体验，避免出现加载了部分数据，就显示残缺的页面；

加载中loading图片

现在要达到的目的就是：在数据资源没有完全加载完前，不让页面展示，而是显示一个loading动画或者简单的加载提示；

那么只需要做如下处理就可以了；

下面是原生的js代码：

window.onload = function(){

document.getElementById("loading").style.display = "none";

//init(data);//这里是你想要做的处理

}

下面是HTML代码：

/**

*需要先创建一个loading加载层在所有的元素之上显示：

**/

?<div id="loading"><img src="loading.gif" alt="加载中"></div>

下面是CSS代码：

/**

*目的在于让ID为loading的DIV层显示在所有的HTML元素之上，下面是我一般会用的方法

**/

#loading{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

z-index:1001;

}