0

我已经实现了一个样式表切换解决方案，其中样式表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'
}]);

在阅读了preload! Prefix他们的文档页面后，但这似乎不起作用。

编辑 2

还尝试添加：

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

  return resourceObj;
});

但它似乎没有效果。

4

2 回答 2

0

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

于 2013-08-17T13:58:17.663 回答
0

如果您在使用之前重新定义“预加载”前缀似乎有效：

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

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

于 2013-10-22T23:59:50.870 回答