Preload images onsceneload with custom loading indicator


(Pablo) #1

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.

Many thanks!


(Hans-Gerd Claßen) #2

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


Improved Preload Functionality
(Pablo) #3

I should learn Javascript :grimacing:


(Hans-Gerd Claßen) #4

enter link description here

if your willing … try this script onsceneload as afirst attempt :slight_smile:
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);

Jittery scene transitions! How to make them smoother?