如何在不使用 yepnope.js 应用的情况下预加载 css 文件？答案

【问题标题】：How to preload css files without applying them with yepnope.js?如何在不使用 yepnope.js 应用的情况下预加载 css 文件？
【发布时间】：2013-08-17 13:46:47
【问题描述】：

我已经实现了一个样式表切换解决方案，其中样式表href 在单击时使用 jQuery 进行更改。

它工作正常，但是在第一个页面加载时，在样式表之间切换时会出现闪烁，因为之前没有加载不同的 css 文件（一旦使用它们就没有闪烁）。

所以我使用 yepnope.js 预加载 css 文件：

yepnope([{
  load: 'http://path/to/stylesheet_1.css',
  callback: function (url, result, key) {
    console.log(url, result, key);
  }
}, {
  load: 'http://path/to/stylesheet_2.css',
  callback: function (url, result, key) {
    console.log(url, result, key);
  }
}]);

除了每个样式表在加载时都在应用之外，一切都按预期工作。

是否有预加载样式表而不实际应用它们？

编辑

我也试过了：

yepnope([{
  load: 'preload!http://path/to/stylesheet_1.css'
}, {
  load: 'preload!http://path/to/stylesheet_2.css'
}]);

在他们的documentation page 上阅读了有关preload! Prefix 的信息后，但这似乎不起作用。

编辑 2

还尝试添加：

yepnope.addFilter(function (resourceObj) {
  resourceObj.noexec = true;

  return resourceObj;
});

但是好像没有效果。

【问题讨论】：

标签： jquery css yepnope

【解决方案1】：

您可以通过ajax 请求css 文件，并缓存其中的文本内容，然后在您想加载它时将其粘贴到样式标签中。

【讨论】：

【解决方案2】：

如果您在使用之前重新定义“预加载”前缀，这似乎可行：

yepnope.addPrefix("preload", function(resource) {
  resource.noexec = true;
  return resource;
});

来源：https://gist.github.com/dzello/1015783

【讨论】：