How to preload assets for a specific responsive scene

Exporting & Previewing
3

Dynamic preloader in Hype

The video demonstrates the concept in action, where we target the Desktop breakpoint and preload an image (positioned to the right) using the standard Hype preloader. The remaining images are loaded onto the stage as observed (following the display of the Hype scene). For testing purposes in the Network panel, remember to enable throttling and disable caching!

This solution employs breakpoints to preload content by manipulating the Hype Document Data before it is rendered into the DOM, dynamically setting preload flags. Although this method might not be compatible with future versions of Hype, its non-critical nature and the project-specific packaging of Hype could make it beneficial for your project.

  1. Turn off preloading for all resources within Hype (this step is crucial).
  2. Modify your breakpoint values or devise an alternative method for differentiation.
  3. Populate the arrays in the provided code with your filenames (currently, there is one file for each breakpoint).
  4. To verify its functionality, use Chrome's Network Panel and apply throttling (disable caching for testing!).

PreloadBasedOnBreakPoint.hype.zip (571,3 KB)

2 Likes