Chỉ tải phần hiển thị của DOM và loại bỏ phần tử DOM không hiển thị trong chế độ xem

Question

Tôi đang tạo ứng dụng có nội dung mới được tải trong div (sử dụng AJAX) làm cuộn xuống cho phép người dùng đọc toàn bộ nội dung ở chế độ liên tục (không có điều hướng). Nhưng, vấn đề là, vì toàn bộ nội dung là cuộn liên tục rất lớn liên tục tải toàn bộ nội dung vào DOM, làm cho trình duyệt thực sự chậm.

Có thể sử dụng javascript/jQuery để xóa các phần tử DOM không hiển thị trong chế độ xem và tải lại khi người dùng cuộn lên không?

Answer 1

Tôi muốn đề xuất rằng nếu tải trang đang trở nên rất chậm, bạn sử dụng phương thức tải và hiển thị nội dung khác.

Hoặc là làm lại hoặc làm lại nội dung bạn đang hiển thị.

Lý do hoạt động trên Facebook và Twitter là vì nội dung đang được tải là rất 'nhẹ' (tức là chỉ một vài đoạn văn bản và một số hình ảnh nhỏ).

Answer 2

Điều này rất có thể.

Ex: (dán vào giao diện điều khiển trình duyệt của bạn trên trang này để hiển thị các hiệu ứng)

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