页面加载进度条实现的原理是什么

页面加载的时候出现loading动画,然后loading动画消失,页面内容出来,我该怎么判断这一步呢

阅读 4.8k
3 个回答

用ajax去请求,请求成功了把内容显示出来,把loading隐藏

页面先显示加载的loading图片,然后你获取你要加载的图片是否都加载完毕,再用onload将loading图片隐藏掉就可以

在线demogenerator-es6-angular

看过之后可以用生成器,generator自己生成一个这样的项目,

里面关于你说的问题,的解决方案在js/index.js里:

require.ensure(['splash-screen/dist/splash.min.css', 'splash-screen'], function(require) {

    require('splash-screen/dist/splash.min.css').use();
    require('splash-screen').Splash.enable('circular');
});

require.ensure(['css/main.css', 'splash-screen', './main'], function(require) {

    require('css/main.css').use();

    var App = require('./main').default;
    (new App()).run();
});

销毁loading的核心在js/main.js里:

destroySplash() {
    var _this = this;
    Splash.destroy();
    require('splash-screen/dist/splash.min.css').unuse();
    setTimeout(function() {
        if (Splash.isRunning()) {
            _this.destroySplash();
        }
    }, 100);
}

我还有一篇关于这个工具的介绍:用ES6编写AngularJS程序是怎样一种体验

推荐问题
宣传栏