Question

我有一个使用http://deelay.me故意延迟的模板，因此我可以测试速度慢的服务器。

<template name="aboutPage">
  <img src="http://deelay.me/2000/http://i.telegraph.co.uk/multimedia/archive/02830/cat_2830677b.jpg">
</template>

在我的路由器页面上：

Router.configure
  layoutTemplate: 'layout'
  loadingTemplate: 'loading'

Router.route '/', name: 'homePage'
Router.route '/about', name: 'aboutPage'

加载模板：

<template name="loading">
  {{> spinner}}
</template>

出于某种原因，当我点击“关于”页面时，我会在图像加载时看到缺少的图像图标。我错过了什么吗？

Answer 1

我建议您查看此套餐：https://atmospherejs.com/mrt/iron-router-progress 它让你推迟了快速路线上的进展。

Router.configure
    progressDelay : 100

关于“缺少图像图标”，我试图重现这种情况，但我不能。但是，我注意到使用deelay.me技术不能用于测试路由之间的加载。那是因为在图像请求开始时已经加载了aboutPage。因此，加载微调器已经消失。

检查此repo是一个实际跟踪图像加载的简单示例：https://github.com/humberaquino/meteor-imageloading-example

我希望这会有所帮助：）

Answer 2

我让它适用于此。

Router.route('/about', {
  name: 'about',
  data: function() { 

    if(this.ready()){
      this.render()
    }else{
      this.render('loading')
    }
  }
});

看一下，我们确保模板上的所有数据都已准备就绪，否则我们会渲染'loading'模板。

这对我有用

Meteor - 如何在模板加载时正确显示微调器

2 个答案: