How to add load more button for a HTML/CSS page?

I want to make a single page website and it will have huge content. Suppose it has 1000 photos on it. I don't want people to wait 5 minutes to load my page. So I wanna add LOAD MORE button on the page bottom.

How to do that with HTML/CSS/JS?

Answers


You could set all the divs' to display:none; at first and then use jQuery to show the first 10 (or however many you wish to show):

$(function(){
    $("div").slice(0, 10).show(); // select the first ten
    $("#load").click(function(e){ // click event for load more
        e.preventDefault();
        $("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them
        if($("div:hidden").length == 0){ // check if any hidden divs still exist
            alert("No more divs"); // alert if there are none left
        }
    });
});

Example.

This saves you the trouble of including an entire plugin when what you want can be achieved in a few lines of code.


Need Your Help

Return a subset of a JPA entity as a array of maps from a JPQL query?

hibernate jpa jpql

In JPQL it is possible to ask for a subset of an entity using a constructor expression such as

How do you reference HTML/ASP elements with C# objects?

c# asp.net html5

I'm new to ASP.NET and C#, I've primarily worked with Java. I want to dynamically add nodes to a tree view. I've followed a few tutorials but whenever I implement them they do not appear to work. I...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.