Home/ Questions/Q 7859739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T22:01:16+00:00

I implemented infinite scroll like so: new_page_value = 1; $(window).scroll(function() { if($(window).scrollTop() >= $(document).height()

  • 0

I implemented infinite scroll like so:

new_page_value = 1;

$(window).scroll(function() {
    if($(window).scrollTop() >= $(document).height() - $(window).height() - 200) {

        new_page_value = parseInt(new_page_value) + 1;

        get_page(new_page_value);

    }
});

When the user almost reaches the bottom of the page (200px left) the function get_page() is called. This contains an ajax call that gets all the contents of the new page and appends it to the <body> of the document.

Now I just realized if my site gets big and instead of having 10 small pages I have a gazillion giant pages then the user’s browser might crash if they are persistent enough to keep infinite scrolling for long time.

Would this be a possible solution to this problem:

I will keep appending the new pages to the document <body> until the 10th page, after that I will be replacing the <body> content entirely instead of appending. So using html() rather than append().

I just don’t know if this will actually work to prevent crashes. Will .html() clear the “memory” of prior html that was brought in via ajax?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I really think this is a common issue for many sites with AJAX list content. So let’s take an example at some of the most popular ( think of scale = experience ) websites and their solutions :

    Google Images

    If you check out images.google.com and you search for whatever, for e.g. “guiness”, you will see a page full of results (actually the images are ajax loaded, not the html-code, so the page is with fixed height) and when you scroll at the bottom there is a button "Show more results". This might be solution one of your problem, but is it really necessary to place a button at the bottom after, for e.g. the 10-th page? I really think it is generally a good solution for page usability and memory leaks, but it is really not a necessary option as we can see in :

    Facebook

    Facebook Newsfeed is another story. There is a button "Show more posts", but I really don’t know when exactly it is displayed rather than loading the next page of posts. It happened to me once to load 10-15 pages of posts, only by scrolling. And you know Facebook posts include videos, photos, AJAX comments and a lot of more Javascript fancy stuff, which take a lot of memory. I think they’ve managed to do this after a lot of research, how much of the users scroll to the bottom.

    Youtube

    Youtube has "Load more videos" at every page, so the solution is basically similar to Google, except that Google renders the whole html of the page and on scrolling just loads the images.

    Twitter

    Twitter supports infinite scrolling. Yep, they do it may be because tweet is 140 characters and they don’t need to worry about memory so much. After all who is willing to read more than 1000 pages of tweets at one page load. So they don’t have a button for "load more" and they don’t need one.

    So there are two solutions :

    1. Use infinite scrolling ( you should consider how much content you load and how rich it is )
    2. Use button : "Load More"

    Most of all, you should not delete already loaded content of a list.

    Nowadays everything is Javascript and Javascript has garbage collection, so it is very hard to unload the DOM ( if it has Javascript, not plain text ) and manage to remove the Garbage from Javascript. Which means that you won’t free the whole allocated memory of the unloaded content from the browser.

    Also think about of your requests, why would you need to load again something, that you have already loaded at first place. It costs another server request, meaning another database request and so on.

    • 0