javascript - 文件下载完成后，jquery 的 $.get(...) ajax 成功函数会触发吗？

Question

基本上，我想知道在整个文件下载完成后，jQuery 的 $.get() 方法的“成功函数”是否被触发。我怀疑是，但只是想确认一下。

我正在使用一系列 $.get() 请求来加载页面文件(CSS、javascript 等)，同时显示“加载屏幕”。

在请求的每次成功回调中，我加载下一个文件，直到它们最终全部完成，然后我删除加载屏幕。

问题是随机的，通常在连接速度较慢时(网站专为移动浏览而设计)加载屏幕会消失，但该网站的 CSS 直到约 1-2 秒后才应用，因此用户将看到一个非- 在将 CSS 应用于按钮等之前短暂地样式化网站。

这是我用来加载我的资源的代码

if(!window.MyResourceLoader) window.MyResourceLoader = {};

// list of resources to load
MyResourceLoader.MyResources = new Array(
  "include/resources/.....css",
  "include/resources/.....css",
  "include/modules/.......js",
  "include/...............js",
  "include/...............js");

// reverse the array so we load it in the order above
MyResourceLoader.MyResources.reverse();

MyResourceLoader.resourcesToLoad = MyResourceLoader.MyResources.length;

/**
 * Recursive function - loads the resources
 */
MyResourceLoader.loadMyResources = function()
{
  // exit condition - stop recurring if we've run out of resources to load
  if(this.MyResources.length < 1)
  {
    $(".meter > span").each(function() {
      $(this).stop().animate({
          width: "100%"
        }, 300);
    });
    return;
  }

  // get the next resource to load
  var resource = this.MyResources.pop();

  // if the resource is a css file, append it to the head
  if(resource.match(/css$/))
  {
    // append timestamp to resource
    resource += ("?" + new Date().getTime());

    // ie support
    if(document.createStyleSheet)
      document.createStyleSheet(resource);
    else
      $("head").append($('<link type="text/css" rel="stylesheet" href="' + resource + '">'));

    // recusivley load resources
    this.loadMyResources();
  }
  else if(resource.match(/\.js$/))
  {
    // append timestamp to resource
    resource += ("?" + new Date().getTime());

    // if the resource is a js file, make a request for it
    $.get(resource, function()
    {
      // on successful request of the file, make another call to load resource
      MyResourceLoader.loadMyResources();
    });
  }
}

最终的 javascript 文件是一个“加载结束”.js 文件，它执行以下操作:

// fade out the loading screen
$('#webapp-loader').css('opacity',0);
setTimeout(function()
{
  $('#webapp-loader').remove();
}, 1000);

如您所见，加载结束时甚至有 1 秒的缓冲时间，然后它会移除加载屏幕。

Answer 1

是的 $.get() 下载整个文件，正如我在上面评论的那样我的问题是资源加载只是将 CSS 文件附加到文档的头部，这会触发 CSS 文件的下载 - 所以上面的代码不会等待 head 中的 CSS 在它认为“完成加载”之前完成下载