Jquery 将ajax预加载的内容添加到链接

我做了一个稍微混乱的函数，让我可以动态地将我的php内容文件添加到我的站点的主内容分区中。它工作正常，但在移动设备上加载需要相当长的时间

代码如下：

$(document).ready(pageLoader());

function pageLoader() {
    $.get("content/home.php", function(data){
        $("#mainContent").html(data);
    });
    $("#destinationLink").on("click", function() {  
        $.get("content/destinations.php", function(data){
            $("#mainContent").html(data);
        });
        var position = $("html, body");
        position.animate({scrollTop: $( $(this).attr("href")).offset().top - 50}, 1500, "easeInOutQuint");
        return false;
    });
    $("#homeLink").on("click", function() {
        $.get("content/home.php", function(data){
            $("#mainContent").html(data);
        });
        var position = $("html, body");
        position.animate({
            scrollTop: $( $(this).attr("href")).offset().top
        }, 1500, "easeInOutQuint");
        return false;
    });
    $("#contactsLink").on("click", function() {
        $.get("content/contacts.php", function(data){
            $("#mainContent").html(data);
        });
    });
}

我想让所有的文件都预加载，这样页面之间的转换会更平滑一些。我试图将get-ajax调用添加到on-load javascript函数中，但它只是将它们一起加载到div中

任何简化代码和添加预加载功能的帮助都将非常有用

---

谢谢

去掉括号，应该是$document.readypageLoader；。我不明白这个问题。这主要是设置点击处理程序，将不同的页面加载到mainContent DIV中。它没有预加载任何其他内容。您可以使用AJAX将所有其他页面加载到后台的隐藏DIV中。然后单击处理程序将只显示那些div。这很有效，谢谢！虽然我想知道这将如何影响移动设备上的初始加载时间，但由于AJAX是异步运行的，我认为它不应该影响初始加载时间。