JS实现，页面显示数据加载,显示加载效果，加载完成显示数据

这两天，公众号上的商城，总出现多次访问后台数据库。

 

所以今天加上了一个功能：

 

当用户进入商城时，显示一个JS加载的动效，加载完毕，显示内容。

 

具体实现如下 ：

 

        var load = new Loading();

        var timer = setInterval(function(event) {

                load.init({

                    target: "#wrapper"

                });

                load.start();

                if ($("#dowhile")[0].innerHTML.indexOf("media clearfix") != -1

                    || $("#dowhile")[0].innerHTML.indexOf("我也有底线的") != -1) {

                

                    //alert('有内容了,我要关掉');

                    //这里写自己的业务逻辑代码

                    load.stop();

                    clearInterval(timer);

                }

 

                //如果等的太久了，显示”网络信息不佳”

                //setTimeout(function () {

                //        load.stop();

                //        clearInterval(timer);

                //        popmessage("网络信号不佳或服务器慢");

 

                //    },

                //        10000);

 

            },

            200);

 

 

这里我是从网上找来一个示例，参考这里：

https://github.com/tianxiangbing/loading

 

首先先创建一个loading，目标位置在内容那里，#wrapper

 

然后，开始显示加载。

 

通过setInterval这个方法体里，每隔200毫秒，执行一次，持续执行，直到发现

 

查找不到记录，或者是找到有产品记录，则关闭这个方法。

 

至此实现加载的方法。

 

当然，网上也有用Ajax的

beforeSend：加载中（显示加载窗口）

Success：请求完成（隐藏加载窗口）

来实现

 

但上面的例子会更通用。