With the latest commit (Jan 17, 2020), the following template code can be used in a passage to preload images, and then when all the images are loaded, will provide a link to click to start the first 'actual' passage of the story.
<%
// add a text panel to the scene to show our message
var panel = p.textPanel("Please wait while the scene is loading.");
// the reach_imagePreLoaded event will be sent as each image is loaded
p.on("reach_imagePreLoaded", (e) => {
if (e.count < e.total) {
panel.setOption("text", `Please wait while the scene is loading.\nLoaded: ${e.count} of ${e.total}`);
} else {
// when all the images have loaded you can click the link to go to the next passage of our story (e.g. "Front Door")
panel.setOption("text", "Resources have loaded. Click to continue.");
panel.setOption("link", "Front Door");
}
console.log("Loaded: " + e.src);
});
/*
tell the story to start preloading these images.
It is a dictionary of IDs and URLs.
Note here we have set the "resource prefix" global variable so we
don't have to write out he entire url for each image.
To use the image in a subsequent passage, use the #id, e.g. "#FrontDoor", instead of the url
*/
window.reach_resource_prefix = "http://samesimilar.com/reach/demo-media/"
window.story.preloadImages({"Circulation":"Circulation.JPG", "InterLibrary":"InterLibrary.JPG", "Corridor":"Corridor.JPG", "FrontDoor":"FrontDoor.JPG","GroupStudyRoom":"GroupStudyRoom.JPG","Kiddell": "Kiddell.JPG","MADLab": "MADLab.JPG","MADLabEntrance": "MADLabEntrance.JPG","StairwayBottom": "StairwayBottom.JPG","StairwayLanding": "StairwayLanding.JPG","StairwayTop": "StairwayTop.JPG"});
%>
With the latest commit (Jan 17, 2020), the following template code can be used in a passage to preload images, and then when all the images are loaded, will provide a link to click to start the first 'actual' passage of the story.