Question

我正在开发一个带有Backbone前端的Rails应用程序。在等待AJAX请求解析时，我让Backbone路由器提供了一个带有微调器GIF（47 KB）的加载屏幕。在GIF的DOM元素上也有jQuery淡入淡出效果。一切正常，但如果这是第一次显示加载屏幕，GIF永远不会出现。然后，只要在此后访问同一页面，它就会出现。这可能是由于显示GIF所需的加载时间吗？如果是这种情况，它会在加载时显示还是jQuery会干扰它？通过仔细查看我的代码，我无法看到第一个加载会遇到任何替代逻辑的位置。

JST.EJS模板中的HTML：

<h1 class="loading-message"><%= message %></h1>
<img class="spinner" src="../spinner-light.gif" onload="$(this).fadeIn();">

相关Backbone视图中的render函数：

  render: function () {
    this.$el.html(this.template({message: this.message}));
    this.$el.find(".spinner").hide();
    setTimeout(function() {
      this.$el.find(".spinner").fadeIn(1000);
    }.bind(this), 200);
    return this;
  }

Backbone路由器中的方法，插入渲染的“加载”模板，并在成功的AJAX请求时替换它：

quizShow: function (regionId) {
  this._swapView(new Chickadee.Views.Loading({message: "Loading quiz..."}));
  if (this._requireLoggedIn()) {
    var quiz = new Chickadee.Models.Quiz();
    quiz.save({region_id: regionId}, {
      success: function () {
        this._swapView(new Chickadee.Views.QuizShow({model: quiz}));
      }.bind(this)
      error: function () {
        this._swapView(new Chickadee.Views.NoQuiz());
      }.bind(this)
    });
  } else {
    this._swapView(new Chickadee.Views.Welcome());
  }
}

_swapView函数只是在新视图的关联模板上调用render，然后将其插入到页面主体中。

Preloader微调器GIF在第一次渲染时不显示

0 个答案: