仅在屏幕上显示DIV

Question

我有一个非常长的HTML页面，包含2000多种产品。在旧计算机上，由于内存不足，页面将冻结。如果我将CSS显示更改为none到50％的div，则性能会提高很多。

所以我想要显示：仅当div在屏幕上时阻止。

我尝试使用以下脚本：http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/

我已将 on 方法更新为绑定，但仍然无效。

是否有一种优雅的方法来创建仅在屏幕上显示的css类？

Answer 1

你应该试试onScreen Plugin。 这是你初始化它的方式：

$('.product-item').onScreen({
    doIn: function() {
        // Do something to the matched elements as they come in
        $(this).addClass('visible');
    },
    doOut: function() {
        // Do something to the matched elements as they get off scren
        $(this).removeClass('visible');
    }
});

但我绝对会考虑在用户滚动时通过ajax加载产品。 这称为延迟加载，是一种常用技术。