简单的页面加载

一、进入页面时加载动画

之前，对页面加载时出来的动画一直模糊不清，虽然有好多插件，但仍想想弄明白他的原理，下面介绍的是最简单的加载方式：

HTML：

<div id="preloader" style="position:absolute;top:0;left:0;bottom:0;right:0;background:#fff;">
    <div id="status">
        <p class="center-text"><em>页面正在加载，请稍后。。。</em>
        </p>
    </div>
</div>

JS：

window.onload=function(){
    alert('加载完成了');
    $('#preloader').fadeOut();
}

进入页面时，HTML的DOM结构就在渲染，window.onload表示DOM结构加载完成之后执行代码，遮罩层消失。

还有另外一种方式，原理上是一样的

JS代码：

//监听加载状态改变
    document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果
    function completeLoading() {
        if (document.readyState == "complete") {
            alert('加载完成了');
            $('#preloader').fadeOut();
        }
    }

document.readyState 返回当前文档的状态（载入中……）。

   该属性返回以下值:

• uninitialized - 还未开始载入
• loading - 载入中
• interactive - 已加载，文档与用户可以开始交互
• complete - 载入完成

二、页面滚动到底部进行加载

 

//要加载的数据
    var arr=[1,1,2,3,8,2,32,3,5,8,28,2,3,2,3,5,3,1,4,12,1,2,1,31,23,12,3,12,3,12,3,18,35,2,1,321,3,21,3,12,3,123,6,21321,3,17,3,2,3,12,3,12,1,5,23123,1,321,3,1,23,1,3];

    var con=document.getElementById("con");
    var start=0;

$(window).scroll(function () {
       var scrollTop = $(this).scrollTop();  //滚动条滚动的高度
       var scrollHeight = $(document).height();  //屏幕可见区域的高度
       var windowHeight = $(this).height(); //页面文档的高度
       if (scrollTop + windowHeight == scrollHeight) {
              load(start,10,con);
              start++;
       }
   });

//加载数据函数
   function load(start,num,con){
      var html="";
       if(start+num>arr.length){return ;}
      for(var s=start;s<start+num;s++){
               html+='<section class="media">这是加载新增的内容</section>'

           }
     con.innerHTML=con.innerHTML+html;