Ładowanie tylko widocznej części DOM i usuwanie elementów DOM, które nie są widoczne w rzutni

Question

Tworzę aplikację, w której nowa zawartość jest ładowana do elementu div (przy użyciu AJAX) podczas przewijania w dół, co pozwala użytkownikowi odczytać całość zawartość w trybie ciągłym (bez nawigacji). Ale problem polega na tym, że cała zawartość jest bardzo duża, a ciągłe przewijanie stopniowo ładuje całą zawartość do DOM, co znacznie spowalnia przeglądarkę.

Czy jest możliwe użycie javascript/jQuery, aby usunąć elementy DOM, które nie są widoczne w rzutni, i załadować je ponownie, gdy użytkownik przewinie się w górę?

Answer 1

Zasugeruję, że jeśli ładowanie strony staje się bardzo powolne, należy użyć innej metody ładowania i wyświetlania zawartości.

Umożliwia to lub przerobienie wyświetlanej zawartości.

Powodem tego działania na Facebooku i Twitterze jest to, że ładowana zawartość jest bardzo "lekka" (to znaczy tylko kilka fragmentów tekstu i kilka małych obrazów).

Answer 2

Jest to bardzo możliwe.

Ex: (wkleić do konsoli przeglądarki na tej stronie, aby zobaczyć efekt)

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