Hi there, have we got the ability yet to only preload images for a specific responsive size for our exported files?
Apart of some custom JS you could identify the images needed for a specific layout and enable the preload button on them manually. That would be a static choice, though.
If you are into coding a bit you could use HypeDocumentLoader and in the init event iterate over the resources to enable or disable preloading on the fly based on screen width for example.
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.
- Turn off preloading for all resources within Hype (this step is crucial).
- Modify your breakpoint values or devise an alternative method for differentiation.
- Populate the arrays in the provided code with your filenames (currently, there is one file for each breakpoint).
- To verify its functionality, use Chrome's Network Panel and apply throttling (disable caching for testing!).
PreloadBasedOnBreakPoint.hype.zip (571,3 KB)
2 Likes