Question

我正在创建一个应用程序，其中新内容在div（使用AJAX）中作为向下滚动加载，这允许用户以连续模式（无导航）读取整个内容。但问题是，由于整个内容非常庞大，连续滚动将整个内容逐渐加载到DOM中，使浏览器变得非常慢。

是否可以使用javascript / jQuery删除在视口中不可见的DOM元素，并在用户向上滚动时将其加载回来？

Answer 1

我建议如果页面加载速度变慢，则使用不同的加载和显示内容的方法。

要么重做，要么返工你正在展示的内容。

这在Facebook和Twitter上运行的原因是因为正在加载的内容非常“轻松”（即只有几段文字和一些小图片）。

Answer 2

这是非常有可能的。

例如:(在此页面上将其粘贴到浏览器控制台中以显示效果）

$(window).scroll(function () { 
    var threshold = 0; // how many pixels past the viewport an element has to be to be removed.
    $('.answer').each(function () { 
        if($(this).offset().top + $(this).height() + threshold < $(window).scrollTop()) {       
            $(this).remove() 
        } 
    });
    // handle loading scroll up the same way you're adding new content as you scroll down. 
});

仅加载DOM的可见部分，并删除在视口中不可见的DOM元素

2 个答案: