Loading up separate html files before they are requested with js

Question

So I have this as my source code and all is well, apart from when I try to load up the pages with a slow internet connection. What happens is that the current page gets faded out and back in, and after the content from the external html file is loaded it just pops in.

I'm trying to tackle this with just loading everything once the page is loaded initially, how would that work?

Main JS script link - here

Answer 1

I'm posting this as a separate answer as it focuses on your current approach.

Instead of using .load(), use .get() so it isn't replacing the content of your div right away. Then .fadeOut() the div, replace the HTML, and .fadeIn() upon success.

$.get("news.html", function(data) {
    $("#content").fadeOut(function() {
        $(this).html(data);
    }).fadeIn();
});

I was only able to test this with a slow connection simulator (Network Link Conditioner for Mac OS X), but it ran smoothly for my tests.