It would be nice to get a customizable loading bar/icon between scenes, so the next scene won’t show till is fully loaded.
I have full screen photos on each scene, and if I let them preload the load takes forever. If I uncheck the preload, the progressive loading of the photos feels really old.
simplest idea would be to do a fake preloader with help of a timeline …
additional you could stop this timeline by a custom preloadingfunction that checks onload for some imgs
there’s been a attempt on this forum to load a nextScene by script set it to hidden return to previousscene
if your willing … try this script onsceneload as afirst attempt
arguments are a timelinename <- your preloader, that will be continued (fadeoff or sthg. else)
an intervalltime <- 500 equals check every 0.5 seconds
the script will load every backgroundimage within the scene and continue preloader when loaded
hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}/*http://forums.tumult.com/t/extend-tumult-hype-with-javascript-hypedocument-extensions/6847/31*/
function getAllBackgroundImagesUrls()
{
var tmpArray = [];
var allElements = hypeDocument.currentSceneElement().getElementsByTagName('div');
for (var i = 0; i < allElements.length; i++)
{
if (allElements[i].style.backgroundImage !== "")
{
var backgroundImage = allElements[i].style.backgroundImage;
var imgUrl = backgroundImage.substring(backgroundImage.indexOf('\"')+1, backgroundImage.lastIndexOf('\"'))
tmpArray.push(imgUrl);
}
}
return tmpArray;
}
function waitForLoad(timelineName, intv)
{
if(counter === imgUrls.length)
{
hypeDocument.continueTimelineNamed(timelineName, hypeDocument.kDirectionForward, false)
}else{
setTimeout(function(){waitForLoad()}, intv)
}
}
var counter = 0;
var imgUrls = getAllBackgroundImagesUrls();
for (var i = 0; i < imgUrls.length; i++)
{
var url = imgUrls[i];
var img = new Image();
img.onload = function(e) {
counter++
}
img.src = url;
}
waitForLoad('preloader', 500);