Preloader before loading content #3866
Description
Hello! I'm trying to make a preloader because my swf takes long enough to load. But I cannot find an event after which I need to hide the preloader. Page loading is faster than swf loading. Can anyone help me?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="ruffle.js"></script>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.RufflePlayer.config = {
// Options affecting the whole page
"publicPath": undefined,
"polyfills": true,
// Options affecting files only
"autoplay": "on",
"unmuteOverlay": "hidden",
"backgroundColor": null,
"letterbox": "fullscreen",
"warnOnUnsupportedContent": true,
"contextMenu": true,
"upgradeToHttps": window.location.protocol === "https:",
"maxExecutionDuration": {"secs": 15, "nanos": 0},
"logLevel": "error",
};
</script>
<title>Murloc RPG</title>
</head>
<body>
<div style="text-align:center;padding-top: 20px;">
<embed src="murlocRPG.swf" quality="autohigh" wmode="direct" width="700" height="300" name="gameObj" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</div>
</body>
<script>
(function(){
var preloaderDiv = document.createElement('div');
preloaderDiv.innerHTML = `
<style>
#preloader_preload {
display: block;
z-index: 99999;
height: 100vh;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZmYiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8Y2lyY2xlIHN0cm9rZS1vcGFjaXR5PSIuNSIgY3g9IjE4IiBjeT0iMTgiIHI9IjE4Ii8+ICAgICAgICAgICAgPHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4Ij4gICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgICAgICAgICAgICAgICAgICAgIHR5cGU9InJvdGF0ZSIgICAgICAgICAgICAgICAgICAgIGZyb209IjAgMTggMTgiICAgICAgICAgICAgICAgICAgICB0bz0iMzYwIDE4IDE4IiAgICAgICAgICAgICAgICAgICAgZHVyPSIxcyIgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+ICAgICAgICAgICAgPC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+') center center no-repeat;
background-color: #111;
position: fixed;
top: 0;
width: 100%;
left: 0;
}
body.preloader {
overflow: hidden;
height: 100vh;
}
</style>
<div id="preloader"><div id="preloader_preload"></div></div>
`;
document.body.insertBefore(preloaderDiv, document.body.firstChild);
var preloaderStart = document.getElementById("preloader_preload");
document.body.classList.add('preloader');
function fadeOutFunction(el){
el.style.opacity = 1;
var preloaderEngine = setInterval(function(){
document.body.classList.remove('preloader');
el.style.opacity = el.style.opacity - 0.05;
if(el.style.opacity <= 0.05){
clearInterval(preloaderEngine);
preloaderStart.style.display = "none";
}
}, 20);
}
window.addEventListener("load", (event) => { //event after load swf...
console.log(window.RufflePlayer);
setTimeout(function(){
fadeOutFunction(preloaderStart);
}, 1000);
});
})();
</script>
</html>