Question

我创建了一个在视口中加载的组件。我面临的问题是，一旦它在视口中，它就不会自动更新。混合作业只是检查组件是否在视口中的方法。至于现在，这只是每次刷新页面时都有效。我想在用户向下滚动而不是刷新时更新组件。如果有人能让我走上正确的道路，我将不胜感激。

的密新：

App.InViewportMixin = Ember.Mixin.create({
    enteredViewport: function(){
       var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
        };

        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();

        var bounds = this.$().offset();
        bounds.right = bounds.left + this.$().outerWidth();
        bounds.bottom = bounds.top + this.$().outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right  || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    }.property(),
});

组件：

App.LazyImageComponent = Ember.Component.extend(App.InViewportMixin,{
    loadComponent: function() {
        var enteredViewport = this.get('enteredViewport');
        if (enteredViewport == true) {
             console.log(enteredViewport);
        }
    }.observes("enteredViewport").on('didInsertElement')
});

模板：

Answer 1

您的计算属性存在一些问题。您将其指定为property()而未指定任何相关属性。因此，您的CP将仅计算一次，其余时间将返回缓存结果。

现在你还没有做任何事情来听一个滚动事件。您需要添加一个侦听器来重新计算您的属性。

我对您的代码进行了一些修改。 Here is the working demo.

App.InViewportMixin = Ember.Mixin.create({
  windowInstance: null,

  //Setting to null instead of false to trigger when first value is set
  enteredViewport: null, 

  calcViewport: function(win,top, left){
    var viewport = {
      top : top,
      left : left
    };

    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.$().offset();
    bounds.right = bounds.left + this.$().outerWidth();
    bounds.bottom = bounds.top + this.$().outerHeight();

    var inViewport =  (!(viewport.right < bounds.left || viewport.left > bounds.right  || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

    this.set('enteredViewport', inViewport); 
  },

  scrolled: function() {
    var win = this.get('windowInstance');
    this.get('calcViewport').call(this, win, win.scrollTop(), win.scrollLeft());
  },

  setupScrollListener: function() {
    this.set('windowInstance', $(window));

    //Fire off firstime before any scroll.
    this.get('scrolled').call(this);

    Em.$(window).scroll(this.get('scrolled').bind(this));
  }.on('didInsertElement'),
});

App.LazyImageComponent = Ember.Component.extend(App.InViewportMixin, {
    loadComponent: function() {
        var enteredViewport = this.get('enteredViewport');
        console.log(enteredViewport);
    }.observes("enteredViewport")
});

我刚刚在didInsertElement上设置了一个滚动侦听器，它将触发scroll处理程序。此处理程序将计算元素是否在视口中并将值设置为＆＃39; enteredViewport＆＃39;。在scroll上调用didInsertElement处理程序，以便在任何滚动事件触发器之前对属性进行初始计算。

但请查看评论中提到的插件。可能会以更好的方式完成。

在视口中时，延迟加载图像组件未更新

1 个答案: