Pause while dynamically loading assets


(steve) #1

I’m loading my assets on the load of each scene dynamically using javascript. How can I prevent the scene from commencing until all the assets are loaded in this way? Could I run a timeline until all the assets are dynamically loaded and then go to the main part of the scene?


#2

Hi @steve_wolk

Depending on how you are loading your assets, can you check that they have all loaded and then call the “Start Timeline” method. Place a pause timeline action on the first frame and then call the method to start/continue the timeline?


(steve) #3

Thanks. I’m reading the urls of images / youtube videos etc from a remote database and then I link to the files. So they’re not actually being “loaded” into hype. But I’m needing for them to have downloaded before making the main portion of the scene available. So how can I test that all of the linked assets are “downloaded.” Kind of like the equivalent of jQuery Document Ready.


#4

You can add an “onload” listener to check they have loaded and then call the “Start Timeline” Hype method once they have. If you have many images one theory would be to perhaps create an array or variable that counts up when the “onload” fires for each image and when it reaches a certain amount that corresponds to the amount of images, fire the action.

You could also check the .complete property of an image to see if it’s loaded.

By the way. These are for images loaded into the DOM via an <img /> tag. If you are just placing images inside Hype then this approach will not work as Hype loads them as backgournd-images in a div.

From your description you are bringing them in from “outside” so I’m assuming you are loading them into the DOM inside image tags.

Here is an example of the logic:

var counter = 0;
var images = document.getElementsByTagName('IMG'); // getting all images using the tag
	
for(var i=0; i < images.length; i++){
	images[i].addEventListener('load', function(){
		counter++;
		if (counter < images.length){
			console.log('all images not loaded')
		} else {
			console.log('images loaded')
		}
	})
}

(steve) #5

Wow. Thank you so much!