I have created a holding page with an embedded Spline.design 3D interactive web element using HTML embeds. I have three different versions of the embedded element for the different breakpoints with different scaling and layout of the 3d objects to best fit the screen format. This is achieved through setting them as ‘display: none’ on breakpoints they shouldn’t be visible on.
The problem is that even though they aren’t being displayed, all 3 are loading on every breakpoint making the website too difficult and slow to load. I ideally need it to load just the one for the desired breakpoint. Does anybody know of a better way to make this work? Any other extra tips at making something 3D like this load best would be greatly appreciated!
Basically you would use create a condition for each breakpoint using the windows.innerWidth value, then you could create a new element in the DOM and append it to some target element then setting the innerHtml based on a template literal in your code. That way the browser would only be downloading the code for current breakpoint.
You are a hero! I simply replaced the h2s with my iframe code for each relevant breakpoint and then added some styling to the div ‘target’ and everything worked. Thanks so much for taking the time to show that — life saved.