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.
Hey Jeff, thanks for that. This sounds like it could work for sure. Having searched around Stack Overflow, I can’t seem to find something specific enough for me to be able to work with though. This is probably due to me not being very experienced at using JavaScript though and not using the right terms. Is there a specific example you remember seeing something like this?
Here is a simple example for you on codepen. Shows how to display content based on window inner width. The script tag (open and close) needs to wrap the javascript and the script should be placed below the target or in the before body close.
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.