Question

在Ember.js应用程序中询问浏览器prefetch资源的最佳方法是什么？ HTML标题中的以下代码可以解决这个问题：

<link rel="prefetch" href="http://example.com/example.jpg">

但我不知道将Ember.js应用程序中的代码推送到HTML标头的最佳方法是什么。

我不是在谈论Ember.js应用程序的启动时间。我在使用期间的某个时候正在谈论。在特殊情况下我知道应用程序在下一步之后需要一个特殊资源。我想在那时预加载那个图像/数据/。

实施例

ember new testapp
ember g route about

并向{{#link-to 'about'}}about{{/link-to}}添加app/templates/application.hbs个链接。

现在，当有人点击about链接时，我想prefetch文件http://example.com/example.jpg。

BTW：https://www.npmjs.com/package/ember-cli-headroom不是解决此问题的方法，因为我想在应用程序运行期间的某个时间推送prefetch而不是在它的开头。

Answer 1

没有“Ember方式”将此添加到<head>我害怕。在运行时自己完成它的唯一方法是创建一个新元素并附加它（使用jQuery或常规DOM），可能在你的路由中的setupController或model钩子中（我会这样做）在setupController我自己。）

setupController(model, controller) {
  if(!document.getElementById('my-prefetch')) {
    var element = document.createElement('link');
    element.id = 'my-prefetch';
    element.rel = 'prefetch';
    element.href = 'example.jpg';
    document.getElementsByTagName('head')[0].appendChild(element);
  }
}

将<link rel =“prefetch”... =“”/>推入HTML标头

实施例

1 个答案: