Dissolves without preloading image

Performance
1

I have a project providing random access to five scenes. In order to avoid bogging things down at the start, I’ve set the background images for all but the initial scene not to preload. When setting the transition to dissolve, triggering the dissolve does not trigger the complete scene load, so that the background images suddenly appear halfway through the transition.

As there is limited control for loading in Hype, I assume that this is simply the way things are.

Is there a JS that can be called that will load scene x before the transition begins?

2

Maybe switch the backgrounds to vector artwork (SVG) or compress the artwork with imageOptim. (Also, SVG can be compressed with SVGOMG.) That’s probably not the answer you’re looking for, but it could significantly reduce preload times, allowing you to load all the images at once.

Searching the web might help too…

https://duckduckgo.com/?q=javascript+preload+image

I’d rather just avoid manually pre-loading images. But, it seems like there’s a lot of information about preloading images with JavaScript that’s available online.

3 
var img= new Image();
img.src = fullImgUrl;
img.onload= (function(e){
//your hypeSceneCall ...
})

create a loop if it’s more than one image …
if loading is suspect to take some time -> show some preloader on meantime :slight_smile:

4

Thanks, Michael. I’m using the web output tools in Photoshop to achieve the ideal balance between resolution and size.

I’m not going to try and guess what Santa has in his bag for the next release, but I am looking to see if I can make out the shapes of a shared resource folder and and scene-independent loading.

5

Hi Hans. So, for example, I could attach a script to a keyframe and load large images (such as various background photos or the first few images of a slide show) in the background…

I understand the generalities of JS from my background in Lingo, so I can make out your example. I would need to simply have the images load into memory and wait to be called by the animation so I’m not sure what the syntax would be (img.onLoad … do nothing).

I assume that the procedure would be to output the project as normal in order to populate the resource folder, then use a script referencing a relative link to an image in the folder (e.g., at some point during scene 1, the script loads the background photo from scene 2 so that scene 2 can find it in the cache at scene start.)

6

you wrote that you load the scenes randomly, so there must be a js-function that loads a scene. just wrap the call with my lines above …

7

Not surprisingly, I too have used Photoshop. The web exported images can still be compressed further with ImageOptim. It has "Lossy" and "Lossless" options. The "Lossy minification" can dramatically reduce the size of an image – without significant change in visual quality.

8

imgpreload.hype.zip (2.9 MB)

1 Like
9

Thanks!

10

Thanks, Michael. I’ve got it, but I’ve never run side-by-side comparisons.