How can I make all animations load more consistently?

So I have my site in the works and it there are quite a few effects and gifs. Obviously everything is adhering to the web flow maximum file sizes but I cannot get the page to load consistently. Even if I just refresh the age, the round animated gifs all load at different times and sometimes the gallery fades in before the nav is done loading. It’s technically how I want it to be, but it doesn’t load well. I thought that making the nav-bar load before the content fades in would act like a sort of pre-loader to get everything loaded, but it did not help. Instead of fading the gallery and text in using an effect, should I just cover everything with an opaque div that will fade out after like 2 seconds? What would you suggest? I do like the pre-loader look but not if everything comes in all messed up. It’s almost as if the browser is sometimes keeping cookies and sometimes discarding them. Sometimes the browser skips the animations and sometimes the animations don’t sync well.

Thank you!

Temporary domain: