Modal Lazy Load?

So I’ve created this web page that makes use of only modals, instead of new pages. I’m doing this to get a smooth effect, instead of the break between pages.

However, when I check its network usage, it’s loading 44mb (!). Basically I think all modals are loaded once you open the page.

I’m wondering if it were possible to make the modals ‘lazy load’ so that they only load their contents once clicked on?

However, if my question is too much that of a coding-noob, please explain to me why this approach is wrong? Perhaps the page system is there for a reason.

Happy to hear of any advice or even start a general discussion on separating your website into pages or using fields that load within the page (making it more like a phone app).