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

Question

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

Mixin:

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 处理程序。此处理程序将计算元素是否在视口中并将值设置为 'enteredViewport'。 scroll 处理程序在 didInsertElement 上调用，用于在任何滚动事件触发之前对属性进行初始计算。

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

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

Lazy loading image component not updated when is in the view port

components

lazy-loading

viewport

ember.js