0

我只是好奇,是否可以为之前使用 Flash CC HTML5 创建的 html5 文件创建加载屏幕?如果可能(我希望是这样),我该怎么做,或者您可以向我展示这样做的参考资料(我以前读过关于 preloadJS,但从不使用它)?感谢您的回复,我很抱歉我的英语不好。

4

1 回答 1

1

我有一个代码笔,其中包含如何使用 PreloadJS 的示例,它应该可以帮助您入门:

http://codepen.io/Visualife/pen/RWrmbp

HTML

<div id="progress">...</div>
<div id="progressbar">
  <div class="bar"></div>
</div>
<div id="loadStatus"></div>

JAVASCRIPT

var queue        = new createjs.LoadQueue();
var $status      = $('#loadStatus');
var $progress    = $('#progress');
var $progressbar = $('#progressbar .bar');

queue.on('fileload',     onFileLoad);
queue.on('progress',     onProgress);
queue.on('fileprogress', onFileProgress);
queue.on('error',        onError);
queue.on('complete',     onComplete);

queue.loadManifest([
  {
    id: '1',
    src: 'https://dl.dropboxusercontent.com/u/8304842/cli_iuvo/diacore/20150614_diacore-800x450-test1.mp4'
  }
]);

function onFileLoad(event) {
  $status.text('LOAD: '+ event.item.id);
}
function onFileProgress(event) {
  $status.text('file progress');

  var progress = Math.round(event.loaded * 100);
  $progress.text(progress +'%');
  $progressbar.css({'width': progress +'%'});
}
function onProgress(event) {
  $status.text('progress');

  var progress = Math.round(event.loaded * 100);

  $progress.text(progress + '%');
  $progressbar.css({
    'width': progress + '%'
  });
}
function onError(event) {
  $status.text('ERROR: ' + event.text);
}
function onComplete(event) {
  $status.text('COMPLETE');
  $progressbar.addClass('complete');
}

CSS

html, body {
  background-color: #000;
  color: white;
}

#loadStatus {
  position: absolute;
  top: 55%;
  left: 50%;
  color: #fff;
  font-family: Arial;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
}

#progress {
  position: absolute;
  width: 200px;
  top: 35%;
  left: 50%;
  margin: -25px 0 0 -100px;
  text-align: center;
  font-size: 6em;
}

#progressbar {
  left: 10%;
  position: absolute;
  text-align: center;
  top: 55%;
  right: 10%;
}
#progressbar .bar {
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  background-color: red;
  height: 20px;
  display: inline-block;
  width: 0%;
}
#progressbar .complete {
  background-color: green;
}
于 2015-09-16T10:12:17.057 回答