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"]');

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('\"'))
  return tmpArray;

function waitForLoad(timelineName, intv)

if(counter === imgUrls.length)
hypeDocument.continueTimelineNamed(timelineName, hypeDocument.kDirectionForward, false)
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) {
img.src = url;

waitForLoad('preloader', 500);

Jittery scene transitions! How to make them smoother?