Question

我已经实现了样式表切换解决方案，其中使用jQuery单击样式表href。

它工作正常，但在第一页加载时，在样式表之间切换时会出现闪烁，因为之前已经加载了不同的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;
});

但它似乎没有效果。

Answer 1

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

Answer 2

如果在使用之前重新定义'preload'前缀似乎有效：

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

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

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

2 个答案: