Page loader精确数字提示

最新推荐文章于 2024-09-04 19:52:49 发布

mychirs

最新推荐文章于 2024-09-04 19:52:49 发布

阅读量576

点赞数

分类专栏： javascript XMLHttpRequest 文章标签： js loader ajax level2 page loader

本文链接：https://blog.csdn.net/mychirs/article/details/39523601

版权

javascript 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

XMLHttpRequest

1 篇文章 0 订阅

订阅专栏

页面加载过度

1、可加载css,js文件

2、可为每个加载文件设置回调函数

3、加载完成后自动删除页面DOM

4、使用Ajax level2提供精确的加载的字节书

5、必须要手动提示每个要加载项目的文件大小字节数

6、跨浏览器支持

7、无需任何类库支持

<!DOCTYPE html>
<html>
<head>
  <title>page Loader</title>
  <meta charset="UTF-8">
  <style type="text/css">
    html, body{
      font: normal 2em Arial !important;
    }
    div{
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
    }
    .pageLoader {
      width: 45%;
      padding: 0;
      text-shadow: rgba(160,160,160,.6) 3px 3px 3px;
      margin: 15% auto 0px;
    }

    .loadedCount{
      position: absolute;
      right:20px;
      bottom: 10px;
      font-size: 150%;
    }

    .processBar, .processVal{
      height: 4px;
    }

    .processBar {
      width: 100%;
      background: #ccc;
      background: -moz-linear-gradient(#aaa, #eee);
      background: -ms-linear-gradient(#aaa, #eee);
      background: -webkit-linear-gradient(#aaa, #eee);
      background: -o-linear-gradient(#aaa, #eee);
      background: linear-gradient(#aaa, #eee);
    }

    .processVal {
      width: 0%;
      background: lime;
      background: -ms-linear-gradient(left, green, lime);
      background: -moz-linear-gradient(left, green, lime);
      background: -webkit-linear-gradient(left, green, lime);
      background: -o-linear-gradient(left, green, lime);
      background: linear-gradient(to right, green, lime);
      filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorstr=green, endColorstr=lime);

      transform:translateY(-4px);
      -ms-transform:translateY(-4px);
      -moz-transform:translateY(-4px);
      -o-transform:translateY(-4px);
      -webkit-transform:translateY(-4px);
    }

    .processDesc {
      text-align: center;
      font-size: 150%;
      margin: 0px auto 10px;
    }
  </style>
  <script type="text/javascript">
    var options = {
      loadFiles: [{
        url: '/resources/css/ext-all-notheme.css',
        size: 102316,
        describe: '不带颜色的ExtJs样式文件',
        callback: {
          fn: function() {},
          scope: null,
          args: null
        }
      }, {
        url: '/resources/css/desktop.css',
        size: 18570,
        describe: '桌面应用框架的样式文件',
        callback: {
          fn: function() {},
          scope: null,
          args: null
        }
      }, {
        url: '/js/ext.min.js',
        size: 710906,
        describe: 'Extjs框架文件',
        callback: {
          fn: function() {},
          scope: null,
          args: null
        }
      }, {
        url: '/frameWork.js',
        size: 67961,
        describe: '桌面应用框架文件',
        callback: {
          fn: function() {},
          scope: null,
          args: null
        }
      }, {
        suffix: 'js',
        url: '/server/php/getUserConfig.php',
        size: 4142,
        describe: '用户配置文件',
        callback: {
          fn: function() {
            QoDesk.app.initApp()
          },
          scope: null,
          args: null
        }
      }]
    };
    (function(o) {
      if (!o || !o.loadFiles || !Array.isArray(o.loadFiles) || o.loadFiles.length <= 0) {
        alert('loadFiles is empty!');
        return
      }
      function createXHR() {
        if (typeof XMLHttpRequest != "undefined") {
          return new XMLHttpRequest()
        } else if (typeof ActiveXObject != "undefined") {
          if (typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
              i, len;
            for (i = 0, len = versions.length; i < len; i++) {
              try {
                var xhr = new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                return xhr
              } catch (ex) {}
            }
          }
          return new ActiveXObject(arguments.callee.activeXString)
        } else {
          throw new Error("No XHR object available.");
        }
      }
      function initLoadFiles() {
        function getSuffix(url) {
          return url.substring(url.lastIndexOf('.') + 1, url.length).toLowerCase()
        }
        function getPath(url) {
          return url.substring(0, url.lastIndexOf('/') + 1).toLowerCase()
        }
        for (var i = 0; i < opt.loadFiles.length; i++) {
          opt.loadFiles[i].path = getPath(opt.loadFiles[i].url);
          opt.loadFiles[i].suffix = opt.loadFiles[i].suffix || getSuffix(opt.loadFiles[i].url);
          totalSize += opt.loadFiles[i].size
        }
      }
      function load() {
        var xhr = createXHR(), loadingItem = opt.loadFiles[loadingItemIdx];
        var loadComplete = function(event) {
            function callback(cb) {
              if (cb && typeof(cb.fn) === 'function') {
                if (cb.scope && typeof(cb.scope) === 'object') {
                  if (cb.args && typeof(cb.args) === 'object') {
                    cb.fn.call(cb.scope, cb.args)
                  } else {
                    cb.fn.call(cb.scope)
                  }
                } else {
                  cb.fn.call()
                }
              }
            }
            switch (loadingItem.suffix) {
            case 'css':
              var styleDom = document.createElement('style');
              styleDom.setAttribute('id', loadingItem.url);
              styleDom.setAttribute('type', 'text/css');
              document.head.appendChild(styleDom);
              var styleCode = event.target.responseText.replace(/url\s*\(\s*/gi, 'url(' + loadingItem.path);
              styleDom.appendChild(document.createTextNode(styleCode));
              break;
            case 'js':
              eval(event.target.responseText);
              break
            }
            totalLoadSize += event.loaded;
            if (++loadingItemIdx < opt.loadFiles.length) {
              callback(loadingItem.callback);
              load()
            }else{
              if(opt.autoDestroy){
                document.head.removeChild(document.head.querySelector('style'));
                document.head.removeChild(document.head.querySelector('script'));
                document.body.removeChild(document.body.querySelector('.pageLoader'));
              }
              callback(loadingItem.callback);
            }
          };
        xhr.onprogress = function(event) {
          var loadedPercentage = ((totalLoadSize + event.loaded) / totalSize * 100).toFixed(2),
            processDesc = document.querySelector('.pageLoader .processDesc'),
            processVal = document.querySelector('.pageLoader .processVal');
          processDesc.innerText = (loadedPercentage == 100.00 ? 100 : loadedPercentage) + '%';
          processVal.style.width = (loadedPercentage == 100.00 ? 100 : loadedPercentage) + '%'
        };
        xhr.onload = loadComplete;
        xhr.open('get', loadingItem.url, true);
        xhr.send(null)
      }
      function init() {
        initLoadFiles();
        load()
      }
      var opt = {
        id: 'pageLoader',
        autoDestroy: true
      };
      if (o && typeof(o) === 'object') {
        for (var p in o) {
          opt[p] = o[p]
        }
      }
      var loadingItemIdx = totalLoadSize = totalSize = 0;
      window.onload = init
    })(options);
  </script>
</head>
<body scroll="no" onselectstart="return false">
<div class="pageLoader">
  <div class="processDesc">0.00%</div>
  <div class="processBar"></div>
  <div class="processVal"></div>
</div>
</body>
</html>