Ember.js 延迟加载图像组件在视图端口中时未更新_Ember.js_Components_Lazy Loading_Viewport

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

ember.js

Ember.js 延迟加载图像组件在视图端口中时未更新,ember.js,components,lazy-loading,viewport,Ember.js,Components,Lazy Loading,Viewport,我创建了一个组件，当它在视口中时，它将加载自身。我面临的问题是，它在视口中之后不会自动更新。这个混合作业是检查组件是否在视图端口中的唯一方法。到目前为止，这只在我每次刷新页面时起作用。我希望组件在用户向下滚动时更新，而不是刷新。如果有人能让我走上正确的道路，我将不胜感激。混音： App.InViewportMixin = Ember.Mixin.create({ enteredViewport: function(){ var win = $(window);

我创建了一个组件，当它在视口中时，它将加载自身。我面临的问题是，它在视口中之后不会自动更新。这个混合作业是检查组件是否在视图端口中的唯一方法。到目前为止，这只在我每次刷新页面时起作用。我希望组件在用户向下滚动时更新，而不是刷新。如果有人能让我走上正确的道路，我将不胜感激。

混音：

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')
});

{{lazy image}

您的计算属性存在一些问题。您将其指定为

property（）

，而不指定任何依赖属性。因此，您的CP将只计算一次，其余时间将返回缓存结果

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

我对你的代码做了一些修改

App.InViewportMixin=Ember.Mixin.create({
windowInstance:null，
//设置为null而不是false将在设置第一个值时触发
enteredViewport:null，
CalcView端口：函数（win、top、left）{
变量视口={
顶:顶,，
左：左
};
viewport.right=viewport.left+win.width（）；
viewport.bottom=viewport.top+win.height（）；
var bounds=此。$（）.offset（）；
bounds.right=bounds.left+this.$（）.outerWidth（）；
bounds.bottom=bounds.top+this.$（）.outerHeight（）；
var inViewport=（！（viewport.rightbounds.right | | viewport.bottombounds.bottom））；
此.set（'enteredViewport'，inViewport）；
},
滚动：函数（）{
var win=this.get（'windowInstance'）；
this.get（'calcViewport'）。调用（this，win，win.scrollTop（），win.scrollLeft（））；
},
setupScrollListener:function（）{
set（'windowInstance'，$（window））；
//在任何卷轴之前第一次开火。
this.get（'scrolled'）。调用（this）；
Em.$（窗口）.scroll（this.get（'scrolled'）.bind（this））；
}.on（'didInsertElement'），
});
App.lazymagecomponent=Ember.Component.extend（App.InViewportMixin{
loadComponent:function（）{
var enteredViewport=this.get（'enteredViewport'）；
console.log（enteredViewport）；
}.observes（“enteredViewport”）
});

我刚刚在

didInsertElement

上设置了一个滚动监听器，它将触发

scroll

处理程序。此处理程序将计算元素是否在视口中，并将值设置为“enteredViewport”。在触发任何滚动事件之前，在

didInsertElement

上调用

scroll

处理程序以进行属性的初始计算

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