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.

Website: https://notusterra.com/Website_Transylvania/TransylvaniaWebsite.html

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?

  • 1
    It isn't too late to break it up into several pages. Dec 7, 2020 at 21:52
  • I converted the heavy photos tab into an iframe pointing to another html file. So it is separate from the main website. But that didn't stop the photos from loading, any advice on the correct technique to use?
    – GIS_py
    Dec 8, 2020 at 18:55
  • Couldn't you use a JavaScript "onclick" command to populate the HTML only when the link is clicked? Something a bit like geeksforgeeks.org/…
    – davidgo
    Dec 10, 2020 at 12:01
  • sorry for delay, the challenge is that I have hundreds of photos, and the example you gaven sets the src of individual photos. As I don't know much about JS, i'm struggling to se how I can apply this logic to the section that contains the photos, e.g. <div class="photoContent" id="Bear Lake">. Perhaps the source images by default can be set the same blank image (therefore only loading 1 image for say 100 photos) and on click it starts to load the real photo. Is that logical/possible?
    – GIS_py
    Jan 2, 2021 at 12:35


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.