모든 파일/오디오가로드 될 때까지 프리 로더

오디오를 표시하고 재생하는 일부 JS가 있습니다.모든 파일/오디오가로드 될 때까지 프리 로더

로딩 시간이 매우 길지만 프리 로더를 설치하려면이 자습서 (http://www.dzyngiri.com/show-loading-image-while-the-website-loads/)를 따르십시오.

미리로드 된 이미지가 표시되지만 전체 페이지가로드되기 전에 사라집니다. $ (window) .load & $ (document) .ready 사이의 변형을 시도했지만 JS 및 오디오가 재생 될 때까지 이미 이미지를 표시하지 않습니다.

코드 :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>cal christmas tree canvas 005</title> 

<style type="text/css"> 
#spinner { 
position: fixed; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: 9999; 
background: url(images/Bitmap12.jpg) 50% 50% no-repeat #ede9df; 
} 


</style> 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="cal christmas tree canvas 005.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 

<script type="text/javascript">// <![CDATA[ 
$(window).load(function() { $("#spinner").fadeOut("slow"); }) 
// ]]></script> 

<script> 
var canvas, stage, exportRoot; 

function init() { 
    canvas = document.getElementById("canvas"); 
    images = images||{}; 

    var loader = new createjs.LoadQueue(false); 
    loader.installPlugin(createjs.Sound); 
    loader.addEventListener("fileload", handleFileLoad); 
    loader.addEventListener("complete", handleComplete); 
    loader.loadManifest(lib.properties.manifest); 
} 

function handleFileLoad(evt) { 
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; } 
} 

function handleComplete() { 
    exportRoot = new lib.calchristmastreecanvas005(); 

    stage = new createjs.Stage(canvas); 
    stage.addChild(exportRoot); 
    stage.update(); 
    stage.enableMouseOver(); 

    createjs.Ticker.setFPS(lib.properties.fps); 
    createjs.Ticker.addEventListener("tick", stage); 
} 

function playSound(id, loop) { 
    createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop); 
} 
</script> 
</head> 

<body onload="init();" style="background-color:#D4D4D4"> 
    <div id="spinner"></div> 
    <canvas id="canvas" width="960" height="640" style="background-color:#FFFFFF"></canvas> 
</body> 

</html>

출처

2014-12-11 RedRory

당신이

<body onload="init();"

및

$(window).load(function() {}/or window.onload = function() {}

이 같은 로더 disappering 기능입니다 부르는 당신은 정확히 같은 시간에 초기화() 함수를 호출 다른 이름을 가진 것.

onload 태그에서 init()을 가져와 onload 이벤트 중에서 스크립트의 아무 곳에 나 배치해야합니다.

출처

2014-12-11 22:54:30 baao

모든 파일/오디오가로드 될 때까지 프리 로더

답변

관련 문제