Загрузка только видимой части DOM и удаление элементов DOM, которые не видны в области просмотра

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