As a newbie to website development, I'm struggling to optimise my website to get it to load content only when needed.
Aim: to stop the tab that has all the photo content from loading until the user clicks on the tab. Currently the default 'History' tab that has the property display:block is the one that should be loaded when opening the website, the other tabs that are display:none I don't want to load.
When I inspect in Chrome-devTools-Network-Waterfall, I can see all the images downloading from the other tabs that are non activated with display:none. Evidently this is probably not the correct property to use to achieve my goal.
The way I created it is probably poor or ill-advised but it was initially a simple set of tabs, not much content- where the whole webpage is loaded in its entirety and tabs are simply activated and deactivated. Then content started increasing a lot.
- I tried to put the property 'loading:lazy;' into the photo tab, no change.
- I tried to put the photos into a separate html file within an iframe, no change.
What is the best way to stop all images being loaded?