Javascript 仅在屏幕上显示DIV

我有一个非常长的HTML页面，里面有2000多种产品。在旧电脑上，由于内存不足，页面会冻结。如果我将CSS显示更改为none到50%的div，那么性能会提高很多

因此，我希望只有当div在屏幕上时才显示：block

我已尝试使用以下脚本：

我已将上的方法更新为绑定，但它仍然不起作用

有没有一种优雅的方法可以创建一个只在屏幕上出现的css类？

您应该试试。 以下是初始化它的方式：

$('.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加载产品。

---

这就是所谓的懒散加载，是一种常见的技术。

我可以问问，在什么世界里，一个同时包含2000种产品的页面对任何人都有用？当然，您首先应该执行某种服务器端过滤。我想说，在一个HTML页面上有2000多个产品将是正确的解决方案，可能有0.0001%的时间是这样。同意。我目前正在改变解决这个问题的方法。非常感谢你让我意识到这一点！谢谢。我添加了以下代码来加载js：您应该将插件下载到本地文件夹，我可以想象不允许热链接。还要确保将.product项的可见性设置为

隐藏

，或将

显示

属性设置为

无

。然后，class.visible将具有使该项可见的属性