Question

是否有可能像teambox网站那样在jQuery中进行预加载？

我问，因为我有一个Web应用程序，我的第一页有很多脚本需要加载，页面在加载时显得难看2-4秒，所以我需要预加载。有人知道插件吗？

Answer 1

有一个简单的加载屏幕，可以调用另一个包含您网页的HTML文档：

$(function () {
    $.get('real-page.html', function (serverResponse) {
        $('#container').fadeOut(350, function () {
            $(this).html(serverResponse).fadeIn(350);
        });
    });
});

这将在document.ready事件触发时请求您的代码，并且当从服务器返回响应时，此代码将淡出“container”元素，将其HTML替换为来自服务器的响应，然后淡入背英寸

如果你想加载一堆外部JS文件，你可以这样做：

$(function () {
    var scripts  = ['/js/script1.js', '/js/script2.js', '/js/script3.js'],//create an array of scripts to get
        len      = scripts.length,//cache the length of the scripts array
        jqXHR    = [],//setup array to store jqXHR objects for AJAX requests
        html_str = '';//setup string to store HTML

    //request HTML from server and save it to variable for later use
    jqXHR.push($.get('real-page.html', function (serverResponse) {
        html_str = serverResponse;
    }));

    //iterate through the scripts array requesting each one
    for (var i = 0; i < len; i++) {
        jqXHR.push($.getScript(scripts[i]));
    }

    //when all the jqXHR objects resolve then add the HTML to the DOM
    $.when(jqXHR).then(function () {
        $('#container').fadeOut(350, function () {
            $(this).html(html_str).fadeIn(350);
        });
    });
});

注意：您可以看到所有jqXHR.push()语句，它们将jqXHR对象添加到每个AJAX请求的数组中，这样我们就可以确保每个语句都已解决，然后再做更多的工作。

另一个注意事项：确保您的服务器在将JS文件发送到浏览器之前压缩它们。如果不这样做，请缩小生产代码。这是一个很好的缩小工具：http://htmlcompressor.com/compressor.html

做一个像teambox网站的网站的预加载

1 个答案: