Question

我希望将LazyLoad技术用于图像，并使用无限滚动将新内容加载到我的页面中。这两件事都利用了Facebook画布应用程序内部不起作用的$(window).scrollTop()函数。我知道我可以使用FB.Canvas.getPageInfo()来获取当前的scrollTop值但是我遇到了一些性能问题，我的代码如下：

var oldScroll = 0;       // current scroll 
var newScroll = null;    // new scroll (fetched from FB.Canvas)

// Override the normal function to work within fb
// !!This seems to kill the browser
$.fn.scrollTop = function() {
    return FB.Canvas.getPageInfo().scrollTop;  
};

// poll to check for any changes in scroll
setInterval(function() {
    newScroll = FB.Canvas.getPageInfo().scrollTop; 

    if(oldScroll != newScroll) {     // have we scrolled at all?
        oldScroll = newScroll;
        $(window).trigger($.Event('scroll'));   // fire a scroll event to keep the rest of the application that is listening
    }
}, 1000);

如果我不覆盖scrollTop函数，但是一旦我的浏览器很快崩溃，似乎没问题。

我是否完全错了？有人已经在FB画布中创建了一种方法吗？欢呼声。

Answer 1

我试图解决同样的问题，我的解决方案是Facebook应用程序+ setInterval中的一个额外元素（div＃xscroll，pos：abs，L）：

function wininfo() {
    FB.Canvas.getPageInfo(
        function(info) {
            $('#xscroll').height(info.clientHeight+info.offsetTop+info.scrollTop).trigger('scroll');
        }
    );
};

现在您可以将此#xscroll用于LazyLoad：

$(".img").lazyload({threshold:400,effect:"fadeIn",skip_invisible:true,container:'#xscroll'});

问题是 - 当FB.Canvas.getPageInfo，我的间隔为2000时CPU使用率很高 - 而且CPU使用率很高。经过一小时的脚本工作 - Safari减速并记忆......

Answer 2

您是否坚持让scrollTop()功能被覆盖？最初它适用于您通过jQuery选择器提供的任何元素，而您似乎只将其限制为Facebook画布。如果任何其他javascript尝试使用scrollTop()，它将失败，不会吗？

至于解决方案，我已经完成了无限滚动 - setInterval()以查看您是否已达到底部，然后加载内容，然后再次检查滚动，依此类推。但是我没有随时触发窗口的原始滚动事件，因为没有必要 - 至少在我的情况下。

Facebook Canvas应用程序内的滚动事件

2 个答案: