Choisir quand charger les images d'une page

Bien le bonsoir à tous !

Je me permets de poster cette question car comme vous l'aurez compris je n'ai toujours pas trouvé de réponse à mon problème...

En fait c'est plutôt simple, j'ai une page contenant de nombreux visuels (presque 200) répartis dans plusieurs galleries qui s'ouvre sous forme de pop-up au clique. Le truc c'est qu'évidemment le navigateur charge toutes les images et c'est très très long.

Ce que je souhaiterais c'est qu'à l'ouverture de la page aucune images ne soient chargés mais que ces dernières se chargent à l'ouverture de chaque gallérie.

J'ai déjà tenter avec un lazy load mais ça ne marche pas (encore).

Si jamais je n'ai pas été assez clair voici le lien de la page en question je pense que vous comprendrez bien plus facilement : www.florianbranchet.com/portfolio.html

Par avance merci à vous et bonne soirée !

Effectivement c'est embêtant, quasi-impossible de naviguer !
Ce que je ferais (dans l'idée, après tu adapte), c'est d'insérer avec javascript un bloc image dans ta popup uniquement au clic de la galerie.
il faudrait que le html ressemble à ça:

<div class="galerie" onclick="loadPic(this,'./image.png');"></div>

Et ton js à ça:

function loadPic(element,src) {
	element.innerHTML='<img src="'+src+'"/>';
}

J'imagine que tes images sont plutôt en background donc ça ferait plutôt:

<div class="galerie" onclick="loadPic(this,'./image.png');"><div class="pic"></div></div>

function loadPic(element,src) {
	element.getElementsByClassName('pic')[0].style.background='url('+src+')';
}

Après je ne connais pas trop la structure de ton code donc ça ne correspond sûrement pas, je veux juste te donner la direction

Bonsoir !

Merci beaucoup de ta réponse je vais essayer de bricoler tout ça et je reviens au plus vite vous tenir au courant je suis un peu débordé en ce moment par contre !

À bientôt !